jQuery +css实现定时器轮播图效果-蒲公英云

jQuery +css实现定时器轮播图效果

大家好这里是逍遥君，很高兴见到大家，今天写了一篇实现定时器轮播图效果，有兴趣的同学可以一起学习~

效果图→

图片是滚动切换（因为暂时没有动态截图工具，请大家自行脑补）

思路：

布置一个div作为显示内容，

再布置一个ul和ul中的li放在div后面，

设置一个定时器，时间到达后自动调用一个方法一定ul的位置以此达到滚动图的效果

使用的语言：html，css，JavaScript，jQuery

然后就是源代码~

html部分

<!--//轮播图-->
            <div id="index_lunbotu_div" style="overflow: hidden; float: left; width: 40%;height:400px;">
                <ul id="index_lunbotu" style="list-style: none;height: 400px;position: relative;">
                    <li >
                        <img src="img/index_slider1.jpg" />
                    </li>
                    <li >
                        <img src="img/index_slider2.jpg" />
                    </li>
                    <li >
                        <img src="img/index_slider3.jpg" />
                    </li>
                </ul>
            </div>

这里没什么太大的不同只是html 的基本布局，重点在于div中要添加overflow:hidden，与ul中的position：relative两个属性；

css实现滚动动画的部分

#index_lunbotu{
    -webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    -moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    -o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    -ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    transition: all 0.3s cubic-bezier(1,.01,.32,1);    
}

js部分

window.onload=function(){
                 var pos =0;
                 var main_slider_length =$('#index_lunbotu').children('li').length;
                 var main_slider_width = $('#index_lunbotu').width();
                 var main_autoSlider = setInterval(main_slideRight, 3000);
                $("#index_lunbotu").width(main_slider_length*main_slider_width);
                    function main_slideRight(){
                        pos++;
                        if(pos==main_slider_length){ pos = 0; }
                        $('#index_lunbotu').css('left', -(main_slider_width*pos)); 
                    }
                    function main_slideLeft(){
                        pos--;
                        if(pos==-1){ pos = main_slider_length-1; }
                        $('#index_lunbotu').css('left', -(main_slider_width*pos));     
                    }
        }