jq定时器轮播

------html------

<div class="yctg">
    <div class="yctg-in">
        <div class="bktit">
            <h3>科学备考 一次通关</h3>
            <p>16年培养9万学员，领先行业64%通过率</p>
        </div>
        <div class="ycon">
            <ul>
                <li><img src="images/slic_01_h.png">零基础<br/>入门</li>
                <li><img src="images/slider_02.png">基础<br/>精讲课</li>
                <li><img src="images/slider_03.png">重点<br/>提升课</li>
                <li><img src="images/slider_04.png">机考<br/>实战模式</li>
                <li><img src="images/slider_05.png">考前<br/>冲刺战</li>
            </ul>
            <div class="slideCon">
                <div style="display: block"><img src="images/slic_01.jpg"></div>
                <div style="display: none"><img src="images/slic_02.jpg"></div>
                <div style="display: none"><img src="images/slic_03.jpg"></div>
                <div style="display: none"><img src="images/slic_04.jpg"></div>
                <div style="display: none"><img src="images/slic_05.jpg"></div>
            </div>
        </div>
    </div>
</div>

 

 

-----------------css-----------

.yctg{width: 100%;}
.yctg .yctg-in{width: 100%;margin: 0 auto;padding:1.5rem 0}
.yctg-in .yc-t{display:block;width: 90%;padding-bottom:0.5rem;margin: 0 auto}
.yctg-in p{font-size: 1rem;color: #fff;line-height: 1.5rem;text-align: center}
.yctg-in p span{color: #dd5230}

.yctg-in .ycon{width: 100%;margin-top: 2rem}
.ycon ul{width: 90%;margin: 0 auto;overflow: hidden;margin-bottom: 1rem}
.ycon ul li{width: 18%;float: left;margin-right: 2.5%;font-size:12px;text-align: center;font-weight: bold;color: #555}
.ycon ul li img{width: 100%}
.ycon ul li:last-child{margin-right: 0}
.ycon .slideCon{width: 100%;height:8.5rem;overflow: hidden;margin-top: 1rem;}
.slideCon div{width: 100%;float: left;position: absolute;}
.slideCon div img{width: 100%}

 

-----------script------------

$(document).ready(function(){
        // 一次通关轮播
            var slideShow=$(".ycon"),     
                ul=slideShow.find("ul"),      
                showNumber=slideShow.find("ul li"),
                lilength=showNumber.length,
                //list=slideShow.find(".slideCon div"),  
                //oneWidth=slideShow.find("li").eq(0).width();   //获取每个图片的宽度
                //oneWidth=slideShow.find(".slideCon div").eq(0).width();   
                var timer=null;  
                var iNow=0;      //iNow为正在展示的图片索引值.,显示第一张图，即索引值为0
                //console.log(lilength);
                showNumber.on("click",function(){   
                    //alert(1);        //为每个按钮绑定一个点击事件  
                    var i=0,
                        $this=$(this),
                        index=$this.index();
                    for(;i<=lilength;i++){
                        var imgsrc="images/slider_0"+(i+1)+".png";
                        $('.ycon ul li').eq(i).find('img').attr('src',imgsrc);
                    }
                    var newimgsrc="images/slic_0"+(index+1)+"_h.png";
                    console.log(newimgsrc);
                    $(this).find('img').attr('src',newimgsrc);
                    $('.slideCon div').eq(index).show().siblings().hide();
                });
                
                timer=setInterval(function(){        
                    iNow++;                          
                    if(iNow>showNumber.length-1){    //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
                        iNow=0;
                    }
                    showNumber.eq(iNow).trigger("click");    
                },4000);  

})