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