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);
})
})
})