HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>轮播图</title>
<link rel="stylesheet" href="css/new_file.css" />
<script type="text/javascript" src="css/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/new_file.js" ></script>
</head>
<body>
<div class="slider_box">
<ul class="sliderimg_box">
<li class="img_four"></li>
<li class="img_one"></li>
<li class="img_two"></li>
<li class="img_shree"></li>
<li class="img_four"></li>
<li class="img_one"></li>
</ul>
<nav class="icon">
<ol >
<li data-slide="0" class="hasClass"></li>
<li data-slide="1" class=""></li>
<li data-slide="2" class=""></li>
<li data-slide="3" class=""></li>
</ol>
</nav>
</div>
</body>
</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);
})
})
})
