【实践】jquery实现滑动动画及轮播

在做这个之前我已经模仿了一遍大神的轮播动画做了一次其切换模式就是一张图片隐藏另一张图片显示过渡效果是渐入（fadein），但是目前的动画切换大多数都是用图片的左右切换动作的于是在网上看了一些关于这类型的文章然后再结合自己的理解写了一下。

 

 

先上html代码

<div id="wrapper">
    <div id="show-area">
      <ul>
        <li id="first"><a href="#"><img src="images/p1.jpg"></a></li>
        <li><a href="#"><img src="images/p2.jpg"></a></li>
        <li><a href="#"><img src="images/p3.jpg"></a></li>
        <li><a href="#"><img src="images/p4.jpg"></a></li>
      </ul>
  </div>
  <div id="controler">
    
  </div>
</div>
<div id="see"></div>

 

 css属性

这次css属性有几个关键的部分要留意的

*{
    margin:0px;
    padding:0px;
    border:0px;
}
li{
    list-style-type:none;
}
#wrapper{
    margin:0px auto;
}
#show-area{
    width:800px;/*width 和 height 其实就是图片的高和宽*/
    height:450px;
    position:relative;
    overflow:hidden;
    margin:100px auto;
}
#show-area ul{
    position:relative;
    width:3200px;
}


#show-area ul li{
    width:800px;
    height:450px;
    float:left;
}
#controler{
    position:absolute;
    width: 150px;
    height: 20px;
    left: 969px;
    top: 530px;
}
#controler div{
    margin-left:.5em;
    float:left;
    height:15px;
    width:15px;
    border-radius:100%;
    background:#ccc;
}
.onclick{
    background:#fff !important;/*在切换时我们利用添加一个类的方法去改变按钮的背景颜色而，因为按钮初始状态下是用id 选择器设定背景颜色的，所以这里加上一个important*/
}

 

#show-area ul{
    position:relative;
    width:3200px;
}

有必要说一下这段，为什么ul 要加上relative这个属性呢？在html代码里面我们可以看见show-area里面包含了一个 ul 以及4个 li 并且show-area这里我设置了overflow:hidden这个属性，这个图片左右滚动切换的原理就好像我们小时候玩的游戏：一张有一个洞的大纸片后面放着一条长长的纸片我们可以随意地拉动后面的长纸片使它的内容在前面的大纸片的洞里面显示而除了显示区域外的内容给我们就 hidden了它们了。

 

 

jquery代码

$(function(){
    var currentIndex = 0;
    var imgtotal = $("#show-area ul li").length;
    var autoPlayIndex = 0;
    var imgwidth = $("#show-area ul li").width();//获取第一个li的长度用作动画切换效果
    
    
    //通过循环更具图片数量自动添加控制按钮方便以后后台上传图片所用
    for(var i = 0 ; i<imgtotal ; i++){
        
        $("#controler").append("<div>" + "</div>");
    };
    
    
    $("#controler div").eq(0).addClass("onclick");
    $("#controler div").each(function() {
        $(this).click(function(){
            autoPlayIndex = $(this).index();//为模拟点击索引值赋值
            Change(this);
        });
    });
    function Change(obj){
          currentIndex = $(obj).index();
        $("#show-area ul").animate({left:-currentIndex * imgwidth},800);//这里就是切换的部分了当我按地一个按钮的时候它的左属性是没有变化的，而当我按第二个按钮的时候（第二个按钮的索引值是1）ul 的left属性就会减少第1个图片的宽度也就是向左面缩800px，这样第二张图片就显示出来啦，之后的也是如此，这就是为什么要设置ul 属性为relative的意义，并且ul 里面的 li 也要设置为左浮动这样才会有效果
        $("#controler div").eq(currentIndex).addClass("onclick").siblings().removeClass("onclick");
    }
    
    var auto = setInterval(function(){
          autochange();
        },6000);
        
    function autochange(){
        autoPlayIndex = (autoPlayIndex + 1) % imgtotal;
        $("#controler div").eq(autoPlayIndex).trigger("click");
    };
    
    $("#show-area li,#controler div").mouseover(function(){
        clearInterval(auto);
          
    }).mouseout(function(){
        auto = setInterval(function(){
          autochange();    
        },6000)
        
    })
});