jquery图片左右滚动插件

Jquery 496849654@qq.com 4年前 (2020-06-17) 884次浏览 0个评论
html {
    _background-image: url(about:blank);     /*用浏览器空白页面作为背景*/
    _background-attachment: fixed;           /* prevent screen flash in IE6 确保滚动条滚动时,元素不闪动*/
}
body{
	margin:0;
	font-family:'宋体',arial,sans-serif;
	font-size:12px;
	/*background:url(../../image/index/e-bod-bg.jpg) 0 199px repeat-x;*/
}
h1,h2,h3,h4,h5,dl,dd,p,form,select{
	margin:0;
}
ul,ol,input{
	margin:0;
	padding:0;
	list-style-type:none;
}
em,var,i{
	font-style:normal;
}
a{
	text-decoration:none;
}
a img{
	border:0 none;
}

.e-teacher-box{
	height:293px;
	border:1px #E0E0E0 solid;
	overflow:hidden;
}
.e-teacher-l{
	width:25px;
	float:left;
	padding:100px 0 0 18px;
	overflow:hidden;
}
.e-teacher-l a{
	display:inline-block;
	height:23px;
	width:17px;
	background:url(http://www.eswine.com/esnews/Common/image/index/e-click-l.jpg) 0 0 no-repeat;
}
.e-teacher-l a:hover{
	background:url(http://www.eswine.com/esnews/Common/image/index/e-click-l-hover.jpg) 0 0 no-repeat;
}
.e-teacher-m{
	width:642px;
	height:266px;
	padding-top:15px;
	float:left;
	overflow:hidden;
}
.e-teacher-r{
	float:left;
	width:32px;
	padding:100px 0 0 8px;
	overflow:hidden;
}
.e-teacher-r a{
	display:inline-block;
	height:23px;
	width:17px;
	background:url(http://www.eswine.com/esnews/Common/image/index/e-click-r.jpg) 0 0 no-repeat;
	cursor:pointer;
}
.e-teacher-r a:hover{
	background:url(http://www.eswine.com/esnews/Common/image/index/e-click-r-hover.jpg) 0 0 no-repeat;
}
.e-teacher-list{
	width:5000px;
	height:260px;
	overflow:hidden;
}
.e-teacher-list li{
	width:150px;
	float:left;
	margin-right:14px;
	overflow:hidden;
}
.e-teacher-list-img{
	height:216px;
	background:url(http://www.eswine.com/esnews/Common/image/index/e-bg6.jpg) 0 bottom no-repeat;
	overflow:hidden;
}
.e-teacher-list-img img{
	width:140px;
	height:202px;
	padding:4px;
	border:1px #E2E2E2 solid;
	border-bottom:none;
}
.e-teacher-list-tit span{
	display:block;
	height:22px;
	line-height:22px;
	text-align:center;
	overflow:hidden;
}
.e-teacher-list-tit span a{
	color:#333;
}
.e-teacher-list-tit span a:hover{
	text-decoration:underline;
}
.e-teacher-list-tit span .e-red{
	color:#9A003C;
}
<div class="e-teacher-box">
	<div class="e-teacher-l"> <a href="javascript:;;" id="e-left2"></a> </div>
	<div class="e-teacher-m">
  <ul class="e-teacher-list" id="e-con2">
		<li>
	  <div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d151b43fe47.jpg"></a> </div>
	  <div class="e-teacher-list-tit"> <span><a href="javascript:">田晓明</a></span> <span><a href="javascript:" class="e-red">以葡萄酒演绎人生</a></span> </div>
	</li>
		<li>
	  <div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50188f84e4a48.jpg"></a> </div>
	  <div class="e-teacher-list-tit"> <span><a href="javascript:">曲乐</a></span> <span><a href="javascript:" class="e-red">我的侍酒师之路</a></span> </div>
	</li>
		<li>
	  <div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b14446631.jpg"></a> </div>
	  <div class="e-teacher-list-tit"> <span><a href="javascript:">黄为民</a></span> <span><a href="javascript:" class="e-red">我的无愧之选</a></span> </div>
	</li>
		<li>
	  <div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b22e4f020.jpg"></a> </div>
	  <div class="e-teacher-list-tit"> <span><a href="javascript:">姜山</a></span> <span><a href="javascript:" class="e-red">踏上新的葡萄酒旅程</a></span> </div>
	</li>
		<li>
	  <div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d80e6d6bd9d.jpg"></a> </div>
	  <div class="e-teacher-list-tit"> <span><a href="javascript:">王密</a></span> <span><a href="javascript:" class="e-red">爱上葡萄酒</a></span> </div>
	</li>
		<li>
	  <div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b336440e1.jpg"></a> </div>
	  <div class="e-teacher-list-tit"> <span><a href="javascript:">胡若冰</a></span> <span><a href="javascript:" class="e-red">在工作中传播葡萄酒文化</a></span> </div>
	</li>
		<li>
	  <div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b2fe4d96b.jpg"></a> </div>
	  <div class="e-teacher-list-tit"> <span><a href="javascript:">唐亚琼</a></span> <span><a href="javascript:" class="e-red">在葡萄酒领域找寻自己的方</a></span> </div>
	</li>
		<li>
	  <div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b3708e559.jpg"></a> </div>
	  <div class="e-teacher-list-tit"> <span><a href="javascript:">张子英</a></span> <span><a href="javascript:" class="e-red">愿为葡萄酒事业贡献力量</a></span> </div>
	</li>
		<li>
	  <div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b40274775.jpg"></a> </div>
	  <div class="e-teacher-list-tit"> <span><a href="javascript:">刘恩泽</a></span> <span><a href="javascript:" class="e-red">圆梦侍酒师</a></span> </div>
	</li>
	  </ul>
</div>
	<div class="e-teacher-r"> <a href="javascript:;;" id="e-rig2"></a> </div>
  </div>

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script>
/*
 * 功能:多张图片左右点击按钮进行滚动,数据不足的时候不出现最后空白
 * 版本:基本功能插件
 */
 ;(function($){
    $.fn.extend({"imgScroll":function(options){

        var elment = this;
        var defaults = {
              width:164,
              visible:4,
              ltriggers:'#e-left',
              rtriggers:'#e-right',
              classname:'espan'
        };

        var options = $.extend(defaults,options);

        var i = elment.children('li').length;
        var ii = elment.children('li').length;

        elment.width(i * options.width);
        $(options.rtriggers).click(function() {
          var marginL = elment.css("margin-left") == "auto" ? 0 : parseInt(elment.css("margin-left"));
          if (i > options.visible) {
            if (i - options.visible >= (options.visible-1)) {
              if (!elment.is(":animated")) {
                elment.animate({
                  marginLeft: marginL - options.width * (options.visible-1) + "px"
                }, "slow", function() {
                  i -= (options.visible-1);
                })
              }
            } else {
              if (!elment.is(":animated")) {
                elment.animate({
                  marginLeft: marginL - options.width * (i - options.visible) + "px"
                }, "slow", function() {
                  i = options.visible;
                })
              }
            }
          }
        });
        $(options.ltriggers).click(function() {
          var marginL = elment.css("margin-left") == "auto" ? 0 : parseInt(elment.css("margin-left"));
          if (i < ii) {
            if (i < ii - (options.visible -1)) {
              if (!elment.is(":animated")) {
                elment.animate({
                  marginLeft: marginL + options.width * (options.visible -1) + "px"
                }, "slow", function() {
                  i += (options.visible -1);
                })
              }
            } else {
              if (!elment.is(":animated")) {
                elment.animate({
                  marginLeft: marginL + options.width * (ii - i) + "px"
                }, "slow", function() {
                  i = ii;
                })
              }
            }
          }
        })
    }
  });



 })(jQuery);

$(function(){
    $("#e-con2").imgScroll({
      width:164,
      ltriggers :"#e-left2",
      rtriggers :"#e-rig2",
      visible:4
    });

});
</script>

css315 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jquery图片左右滚动插件
喜欢 (4)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到