<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
list-style: none;
margin: 0;
padding: 0;
}
#outer{
width: 320px;
height: 300px;
margin: 50px auto;
background-color: lightpink;
padding: 12px 0px ;/*上右下左*/
overflow: hidden;/*隱藏溢出內容*/
position: relative;
}
#imgList{
width: ;/*用js來自動設置#imgList寬度*/
position: absolute; /*子元素相對父元素的絕對定位*/
left:;/*每移320px 到下一張*/
}
#imgList li{
float: left;
padding: 0px 10px;
}
#navDiv{
position: absolute;
bottom: 15px;
left: ;/*通過js來自動設置導航居中*/
}
#navDiv a{
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
float: left;
opacity: 0.5;/*設置透明*/
}
#navDiv a:hover{ /*設置鼠標移入效果*/
background-color: black;
}
</style>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<!--創建圖片導航按鈕-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
<script type="text/javascript" >
/*嘗試構造一個可以執行簡單動畫的函數
* -參數：
* obj:要執行動畫的對象
* attr:要執行動畫的樣式，如left top width height
* target:執行動畫的目標位置
* speed:移動的速度（正數右移，負數左移）
* callback:回調函數，這個函數會在動畫執行完畢以后執行
*/
function move(obj,attr,target,speed,callback){
//關閉上一個定時器，防止加速
clearInterval(obj.timer);
//獲取元素目前的位置
var current=parseInt(getStyle(obj,attr));
//判斷速度的正負
//如果從0到800移動，則speed為正,800到0移動，為負
if(current>target){
//此時speed為負
speed=-speed;
}
//-開啟一個定時器，來執行動畫效果
obj.timer=setInterval(function(){
//獲取目標原來的left值
var oldValue=parseInt(getStyle(obj,attr));
//在舊值的基礎上增加
var newValue=oldValue+speed;
if((speed<0&&newValue<target)||(speed>0&&newValue>target)){
newValue=target;
}
//將新值設置給目標
obj.style[attr]=newValue+"px";
if(newValue==target){
//到達目標值，關閉定時器
clearInterval(obj.timer);
//動畫執行完畢，調用回調函數
callback&&callback();
}
},30);
}
/*定義一個元素，來獲取指定元素的當前的樣式
* -參數：
* obj:要獲取樣式的元素
* name:要獲取的樣式名
*/
function getStyle(obj,name){
return getComputedStyle(obj,null)[name];
}
</script>
<script type="text/javascript">
//1.自動設置#imgList寬度
var imgList=document.getElementById("imgList");
var imgArr=document.getElementsByTagName("li");
//使寬度隨圖片自動變化
imgList.style.width=320*imgArr.length+"px";
//2.自動設置導航居中
var navDiv=document.getElementById("navDiv");
var outer=document.getElementById("outer");
//設置#navDiv隨圖片自動變化
navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
//3.默認當前圖片下的導航按鈕
var allA=document.getElementsByTagName("a");
var index=0;
allA[index].style.backgroundColor="black";
//4.點擊第x個超鏈接顯示第x張圖片
for(i=0;i<allA.length;i++){
//為獲取點擊的是第幾個超連擊，來添加一個num屬性
allA[i].num=i;
//為a添加單擊函數
allA[i].onclick=function(){
//設置點擊動畫優先，點擊先結束自動動畫
clearInterval(timer);
// alert(this);
//獲取點擊的a的索引
// alert(this.num);
index=this.num;
//切換圖片
// imgList.style.left=-320*index+"px";
//換成動畫效果
move(imgList,"left",-320*index,20,function(){
//設置點擊動畫優先，再又開始自動動畫
start();
});
setA();
}
}
//5.創建一個方法來設置選中的a
function setA(){
//判斷
if(index>=imgArr.length-1){
index=0;
imgList.style.left=0;
}
//設置不點擊的變回紅色
for(i=0;i<allA.length;i++){
allA[i].style.backgroundColor="";
}
//選中的設置為黑色
allA[index].style.backgroundColor="black";
}
//6.自動切換圖片
start();
var timer;
function start(){
timer= setInterval(function(){
index++;
//判斷
index=index % imgArr.length;//同上面的if判斷 0%4=4 1%4=1 ...4%4=0
//輪播
move(imgList,"left",-320*index,20,function(){
//修改對應導航按鈕
setA();
});
},3000)
}
//動畫輪播圖終於完成
</script>
</html>
