jquery幻灯片更新版

来源：互联网发布：php获取访客唯一标识编辑：程序博客网时间：2024/05/16 23:54

1、html部分

<div class="carousel" id="carousel"><ul><li><a href="javascript:void(0)"><img src="images/ads/2.jpg"></a></li><li><a href="javascript:void(0)"><img src="images/ads/4.jpg"></a></li><li><a href="javascript:void(0)"><img src="images/ads/1.jpg"></a></li><li><a href="javascript:void(0)"><img src="images/ads/3.jpg"></a></li><ul class="clearfix imgindex" id="imgindex"><li class="chos"><a href="javascript:void(0)"><em>相约情节人</em><em>全场119元起</em></a></li><li><a href="javascript:void(0)"><em>春季新品发布</em><em>全场4.1折起</em></a></li><li><a href="javascript:void(0)"><em>新款上线</em><em>全场357元起</em></a></li><li><a href="javascript:void(0)"><em>愤怒小鸟特卖</em><em>全场89元</em></a></li></ul></ul></div>

2、css部分

.mainright .carousel { width: 550px; height: 100%;}.carousel ul {position: relative;width: 100%;height: 100%;}.carousel>ul>li {   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0;   width: 100%;   height: 100%;   z-index: 5;   display:  none;}.carousel>ul>li:first-child { display:  block;}.carousel>ul li img {display: block;height: 100%;width: 100%;}.carousel>ul li a {display: block;height: 100%;}.carousel  ul.imgindex {position: absolute;height: 16%;width: 100%;left: 0;bottom: 0;z-index: 10;}.carousel  ul.imgindex li {width: 135.9px;height: 100%;border: 1px solid #333;background: rgba(0,0,0,0.5);filter: alpha(opacity=50);float: left;padding: 5px 10px;margin-left: 2px;}.carousel  ul.imgindex li:first-child {margin-left: 0;}.carousel  ul.imgindex li.chos {background: #37A7D7 url(../images/adindex.gif) center bottom no-repeat;opacity: 1;filter: alpha(opacity=100);}.carousel .imgindex li>a {color: #fff;text-decoration: none;}.imgindex li>a em {display: block;text-align: center;}

3、jquery部分

<pre name="code" class="javascript">var curIndex=0,times=null;$(function(){var  $target=$("#carousel"),liLength=$("#imgindex li").length;      $target.hover(function(){            clearInterval(times);      },function(){          times=setInterval(function(){              console.log("length:"+liLength);              showImgs(curIndex);              //$target.find("li").eq(curIndex).stop(true,true).fadeIn().siblings("li").fadeOut();              console.log(curIndex+"one");              curIndex++;              if(curIndex==liLength){                  curIndex=0;              }              console.log(curIndex+"two");          },3000);      }).trigger("mouseleave");/*默认触发一次鼠标离开的事件*/$("#imgindex li").click(function(){//点击div说明文字显示相应的图片    curIndex=$(this).index();    showImgs(curIndex);});function showImgs(index){    $target.find("li").eq(index).stop().fadeIn().siblings("li").fadeOut();    $("#imgindex").find("li").eq(index).addClass("chos").siblings().removeClass("chos");}

1 0