jQuery 手写轮播图

HTML代码

    
        
        
        
        
        
        
        
        
    
    
        

            

                

                

                

                

                

                

            

            

                

                

               

               

               

                

            

        

    

CSS代码

*{

padding: 0;

margin: 0;

font-size:1em;list-style: none;

overflow-wrap: break-word;

-webkit-tap-highlight-color: rgba(0,0,0,0);

}

html,body{

width: 100%;

height: 100%;

}

.slider_box{

width: 100%;

height: 280px;

overflow: hidden;

}

.sliderimg_box{

position: relative;

width: 600%;

height: 280px;

margin-left:-100%;

display: flex;

}

.sliderimg_box li{

width: 16.6%;

height: 280px;

float: left;

background-position: 50% 50%;

}

.img_one{

background-image: url(../imgs/1.jpg);

}

.img_two {

background-image: url(../imgs/2.jpg);

}

.img_shree {

background-image: url(../imgs/3.jpg);

}

.img_four {

background-image: url(../imgs/4.jpg);

}

.icon ol{

position: relative;

text-align: center;

margin-top: -30px;

}

ol li{

display: inline-block;

width: 22px;

height: 4px;

padding: 4px;

text-indent: -999em;

cursor: pointer;

background-color: bisque;

}

.hasClass {

background-color: red;

}

js代码

var mm;

function PhotoSlide() {

$('ul').animate({ "left": "+=" + "-100%" }, 1200, function(){

var i;

$('ol li').each(function(){

if ($(this).attr('class') != ''){

i = $(this).attr('data-slide');

}

});

i = parseInt(i)+1;

if (parseInt(i)==4){

i=0;

$("ul").css('left','0%');

}

$('ol li').attr('class','');

$("ol li:eq("+ parseInt(i) +")").attr('class',"hasClass");

});

mm = setTimeout("PhotoSlide()",4000);

}

$(document).ready(function(){

mm = setTimeout("PhotoSlide()",4000);

$('ol').on('click','li',function(){

var count = $(this).attr('data-slide');

$("ol li").attr("class",'');

$("ol li:eq("+parseInt(count)+")").attr("class","hasClass");

clearTimeout(mm);

$("ul").animate({"left":"-" +parseInt(count)+ "00%"},1200,function(){

mm = setTimeout("PhotoSlide()",4000);

})

})

})