轮播图

以后我觉得那些封装轮播的大神很牛逼，所以为咯节约时间和成本，我们大多用都是别人已经封装好的，但是里面包含咯许多我们不需要的代码，这样就会产生代码冗余，所以今天我也试着自己来写一个，当我写完之后，我发觉原来轮播图也不是那么的难的，写的时候一定要先分析，然后才开始着手，这样的话思路才会清晰明了。

要点分析：

1、首先要在父容器里设置相对定位，图片的容器设置绝对定位。

2、除了第一张外的图片都隐藏

3、设置图片的索引点点，让他随图片的切换而移动

4、鼠标移动到图片上去是，停止切换，反之，开始播放，

5、设置左右点击按钮，（你也可以设置为鼠标移动到里面去的时候才显示）

我写出的效果图如下：

html代码：

<div class="sliderBox">
    <div class="imgbox">
        <ul>
            <li><img src="imgs/banner1.jpg" alt="" /></li>
            <li><img src="imgs/banner2.jpg" alt="" /></li>
            <li><img src="imgs/banner3.jpg" alt="" /></li>
            <li><img src="imgs/banner4.jpg" alt="" /></li>
        </ul>
    </div>
    <div class="dot">
        <ul>
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="next_prev">
        <div class="prev comn">prev</div>
        <div class="next comn">next</div>
    </div>
</div>

css代码：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}

    ul,li{ list-style: none;}
    .sliderBox{ width: 980px; height: 300px;margin:0 auto; border:1px solid red; overflow: hidden; position: relative;}
    .imgbox li{ float: left;width: 980px; height: 300px;}
    .dot{ height: 15px; position: absolute; bottom: 20px; left: 45%;  width: 15%; }
    .dot li{ display: block; width: 15px; height: 15px; background: orange; float: left; border-radius: 50%; margin-left: 10px; text-align: center;} 
    .next_prev{ height: 50px; width: 100%;  position: absolute; bottom:40%; left: 0;}
    .next_prev .comn{  width: 50px; height: 50px; line-height: 50px; color: #fff; background: blue; border-radius: 50%; font-size: 24px; cursor: pointer;}
    .next_prev .prev{ float: left;}
    .next_prev .next{ float: right;}
    .dot li.on{ background: blue;}

js代码：

$(function(){
    var i = 0 , time;
    var length = $(".imgbox li").length;//获取轮播图片的长度

    $(".imgbox li:not(:first)").hide();//设置除了第一个其他的都隐藏（网页刚刚开始打开的时候）
    $(".imgbox li:first").show();

    //3、执行自动轮播
    showTime();

    //1、轮播状态
    function show(){
        $(".imgbox li").eq(i).fadeIn(300).siblings().fadeOut();
        $(".dot li").eq(i).addClass('on').siblings().removeClass('on');
    }
    //2、定时器
    function showTime(){
        time = setInterval(function(){
            i++;
            if(i==length){
                i = 0;//这里只有四张轮播图，i==3的时候是判断轮播图片的长度length
            }
            show();
        }, 3000);
    }
    /*4、编写向左向右函数和触发的事件*/
    /*
    *** 向左翻页
    *
     */
    function pre(){
        clearInterval(time);
        if (i == 0){
            i = length;
        }
        i--;
        show();
        showTime()
    }
    /*
    *** 向左翻页
    *
     */
    function next(){
        clearInterval(time);
        if (i == length){
            i = -1;
        }
        i++;
        show();
        showTime();
    }
    
    //绑定向左向右事件
    $(".prev").unbind();
    $(".prev").bind('click', function(event) {
        /* Act on the event */
        pre();
    });
    $(".next").unbind();
    $(".next").bind('click', function(event) {
        /* Act on the event */
        next();
    });

    
    /*5、当鼠标移动到索引点点上去的时候执行的事件*/
    $(".dot li").hover(function() {
        
        i = $(this).index();
            show();
            //鼠标放上去之后，怎么停止呢？获取到变量的过程，清除轮播，把变量传进去
            clearInterval(time);
    }, function() {
        
        showTime();
    });
    
  
});

这就是我写的我认为简单易懂的方法，如果各位亲还有最简单的最优的可以推荐给我学习一些，希望能够帮助需要帮助的人，谢谢！