<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{list-style: none;}
#banner{
position: relative;
width: 300px;
height: 150px;
margin: 0 auto;
border: 5px solid red;
}
#banner .img-list{
position: absolute;
left: 0;
top: 0;
width: 1200px;
height: 150px;
}
#banner .img-list li{
width: 300px;
height: 150px;
float: left;
}
#banner .img-list li img{
width: 100%;
height: 100%;
}
#banner a{
position: absolute;
top: 55px;
width: 30px;
height: 40px;
background: url('img/btn_show.png') no-repeat;
background-size: 30px 80px;
}
#banner a.prev{
left: 0;
background-position: 0 -40px;
}
#banner a.next{
right: 0;
}
#banner .focus-list{
position: absolute;
left: 110px;
bottom: 10px;
}
#banner .focus-list span{
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin: 0 5px;
}
#banner .focus-list span.active{
background-color: orange;
}
</style>
</head>
<body>
<div id="banner">
<ul class="img-list">
<!-- <li><img src="img/1.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li> -->
</ul>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="focus-list">
<!-- <span class="active"></span>
<span></span>
<span></span>
<span></span> -->
</div>
</div>
<script src="tools.js"></script>
<script>
var oBanner = getById('banner');
var imgList = oBanner.getElementsByClassName('img-list')[0];
var focusList = oBanner.getElementsByClassName('focus-list')[0];
var focusItems = getByTag(focusList,'span');
var imgSrc = ["img/1.jpg","img/dm.jpeg","img/dm1.jpeg","img/dm3.jpg"];
/* 通過圖片數據,渲染頁面的圖片列表 */
var imgString = '';
var focusString = '';
for(var i = 0; i < imgSrc.length; i++){
imgString += '<li><img src="'+imgSrc[i]+'" alt=""></li>';
//先給第一個span加上active
if(i==0){
focusString+='<span class="active"></span>';
}else{
focusString+='<span></span>';
}
}
imgList.innerHTML = imgString;
focusList.innerHTML = focusString;
/* 自動切換圖片 */
var count = 0;
setInterval(function(){
count++;
if(count === imgSrc.length){
count = 0;
}
//imgList.style.left = -300*count + 'px';
move(imgList,'left',20,-300*count);
focusFollow(count);
},2000);
/* 焦點跟隨函數 */
function focusFollow(currentIndex){
//把所有焦點的active去掉
for(var i = 0; i < focusItems.length; i++){
focusItems[i].className = "";
}
//當前圖片對應的焦點加active
focusItems[currentIndex].className = "active";
}
</script>
</body>
</html>
