jquery图片轮播效果代码

slides.js

$(function(){
	/*banner切换开始*/
            var imgsetting = {
                left: ".tunele",//左
                right: ".tuneri",//右
                Img: ".banner_a>a",//图片
                Label: ".tunece>a",//标签
                IsAutomatic: true,//是否自动切换
                time: 1000, //时间时间
                length: 0,
                index: 0,
                setTimeout: null

            }
            var imgmethods = {
                left: function (obj) {
                    imgsetting.index -= 1;
                    if (imgsetting.index < 0) imgsetting.index = imgsetting.length;
                    imgmethods.method(obj);
                },
                right: function (obj) {
                    imgsetting.index += 1;
                    if (imgsetting.index > imgsetting.length) imgsetting.index = 0;
                    imgmethods.method(obj);
                },
                method: function (obj) {
                    jQuery("div.banner").css("background", jQuery(imgsetting.Img, obj).eq(imgsetting.index).attr("bkcolor"));
                    jQuery(imgsetting.Img, obj).hide().eq(imgsetting.index).show();
                    jQuery(".cur", obj).removeClass("cur");
                    jQuery(imgsetting.Label, obj).eq(imgsetting.index).addClass("cur");
                }
            }
            $.fn.ImgSwitch = function (obj) {
                imgsetting.length = jQuery(imgsetting.Img, this).length - 1;
                jQuery.extend(imgsetting, obj);
                if (imgsetting.length < 1) return;
                var $this = this;
                if (imgsetting.IsAutomatic) {
                    imgsetting.setTimeout = setInterval(function () { imgmethods.right($this) }, imgsetting.time);
                }
                jQuery(imgsetting.left).click(function () { imgmethods.left($this) })
                jQuery(imgsetting.right).click(function () { imgmethods.right($this) })
                jQuery(imgsetting.Label, $this).click(function () {
                    imgsetting.index = jQuery(this).index();
                    imgmethods.method($this);
                    clearInterval(imgsetting.setTimeout);
                    imgsetting.setTimeout = setInterval(function () { imgmethods.right($this) }, imgsetting.time);
                });
                $this.hover(function () { jQuery(imgsetting.left).show(); jQuery(imgsetting.right).show(); clearInterval(imgsetting.setTimeout); }, function () { jQuery(imgsetting.left).hide(); jQuery(imgsetting.right).hide(); imgsetting.setTimeout = setInterval(function () { imgmethods.right($this) }, imgsetting.time); })

            }

            $("div.banner").ImgSwitch();
            /*banner切换结束*/
})



<c:if test="${advertInfoList.size() > 0}">
      	 <div class="banner">
           <div class="banner_a">
			 <c:forEach items="${advertInfoList}" var="results" varStatus="index" begin="0" step="1">
			 	 <c:choose>
		             <c:when test="${index.index == 0}">
		             	<c:if test="${results.isActivity == 2}">
		             		<a class="banner${index.index + 1}" style="background:url(${results.bannerPath}) no-repeat top center;cursor:default;" ></a>
		             	</c:if>
		             	<c:if test="${results.isActivity == 0}">
		             		<a class="banner${index.index + 1}" href="${results.bannerLink}" style="background:url(${results.bannerPath}) no-repeat top center;" target="_blank"></a>
		             	</c:if>		             	
		             </c:when>
		             <c:otherwise>
		             	<c:if test="${results.isActivity == 2}">
		             		<a class="banner${index.index + 1}" style="background:url(${results.bannerPath}) no-repeat top center;display:none;cursor:default;" ></a>
		             	</c:if>
		             	<c:if test="${results.isActivity == 0}">
		             		<a class="banner${index.index + 1}" href="${results.bannerLink}" style="background:url(${results.bannerPath}) no-repeat top center;display:none;" target="_blank"></a>
		             	</c:if>		             	  
		             </c:otherwise>
		         </c:choose>			 	
			 </c:forEach>	 
	      </div>
	  <div class="swit">
          <a href="javascript:void(0)" class="swit_l tunele" ></a>
          <a href="javascript:void(0)" class="swit_r tuneri"></a>
          <div class="Toggle_button tunece">
          	<c:if test="${advertInfoList.size() > 0}">
		 <c:forEach items="${advertInfoList}" var="results" varStatus="index" begin="0" step="1">
		 	 <c:choose>
	             <c:when test="${index.index == 0}">
	             	 <a href="javascript:void(0);" class="cur">1</a>
	             </c:when>
	             <c:otherwise>
	             	  <a href="javascript:void(0);">${index.index + 1}</a> 
	             </c:otherwise>
	         </c:choose>			 	
		 </c:forEach>
		 </c:if>             	
          </div>
      </div> 
  </div>
</c:if> 




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值