你的位置:首页 > Java教程

[Java教程]jQuery淡入淡出效果轮播图


用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div。

html结构如下:

<div id="container">    <ul class="pic">      <li><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1"></a></li>      <li><a href="javascript:;"><img src="DSC01628.jpg" alt="pic2"></a></li>      <li><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3"></a></li>    </ul>    <ul id="position">      <li class="cur"></li>      <li class=""></li>      <li class=""></li>    </ul>    <a href="javascript:;" id="prev" class="arrow">&lt;</a>    <a href="javascript:;" id="next" class="arrow">&gt;</a>  </div>

css设置:

*{       margin: 0;       padding: 0;       text-decoration: none;     }    ul{      list-style: none;    }    #container{      position: relative;      width: 400px;      height: 200px;      margin: 20px auto;    }        .pic li {      position: absolute;      top: 0;      left: 0;      display: none;    }    .pic li img {      width: 400px;      height: 200px;    }    #position{      position: absolute;      bottom: 0;      right:0;      margin: 0;      background: #000;      opacity: 0.4;      width: 400px;      text-align: center;    }    #position li{      width: 10px;      height: 10px;      margin:0 2px;      display: inline-block;      -webkit-border-radius: 5px;      border-radius: 5px;      background-color: #afafaf;    }    #position .cur{      background-color: #ff0000;    }     .arrow {       cursor: pointer;       display: none;        line-height: 39px;        text-align: center;        font-size: 36px;        font-weight: bold;        width: 40px;        height: 40px;        position: absolute;        z-index: 2;        top: 50%;       margin-top: -20px; /*width的一半*/       background-color: RGBA(0,0,0,.3);        color: #fff;     }    .arrow:hover {       background-color: RGBA(0,0,0,.7);    }    #container:hover .arrow {       display: block;    }    #prev {       left: 20px;    }    #next {       right: 20px;    }

View Code

JavaScript代码:

$(function(){      //第一张显示      $(".pic li").eq(0).show();      //鼠标滑过手动切换,淡入淡出      $("#position li").mouseover(function() {        $(this).addClass('cur').siblings().removeClass("cur");        var index = $(this).index();        i = index;//不加这句有个bug,鼠标移出小圆点后,自动轮播不是小圆点的后一个        // $(".pic li").eq(index).show().siblings().hide();        $(".pic li").eq(index).fadeIn(500).siblings().fadeOut(500);      });      //自动轮播      var i=0;      var timer=setInterval(play,2000);      //向右切换      var play=function(){        i++;        i = i > 2 ? 0 : i ;        $("#position li").eq(i).addClass('cur').siblings().removeClass("cur");        $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);      }      //向左切换      var playLeft=function(){        i--;        i = i < 0 ? 2 : i ;        $("#position li").eq(i).addClass('cur').siblings().removeClass("cur");        $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);      }      //鼠标移入移出效果      $("#container").hover(function() {        clearInterval(timer);      }, function() {        timer=setInterval(play,2000);      });      //左右点击切换      $("#prev").click(function(){        playLeft();      })      $("#next").click(function(){        play();      })    })

View Code