<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding: 0;margin: 0;}
#wrap{
width: 700px;
text-align: center;
margin: 0 auto;
}
#box{
width: 700px;
height: 525px;
border: 1px solid;
position: relative;
}
#box img{
width: 700px;
height: 525px;
}
#box p{
position: absolute;
width: 100%;
line-height: 30px;
background: rgba(0,0,0,.3);
color: #fff;
}
#box .title1{
top: 0;
}
#box .title2{
bottom: 0;
}
#box button{
position: absolute;
width: 35px;
height: 50px;
font-size: 30px;
top: 50%;
margin-top: -25px;
background:rgba(0,0,0,.3);
color: #fff;
}
#box .leftBut{
left: 0;
}
#box .rightBut{
right: 0;
}
.focus-list{
width: 80px;
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -40px;
z-index:999;
}
.focus-list span{
float: left;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<button>順序</button>
<button>循環</button>
<div id="box">
<img src="img/1.jpg" alt="">
<p class="title1">1/4</p>
<p class="title2">美女1</p>
<button class="leftBut"><</button>
<button class="rightBut">></button>
<!-- 焦點列表 -->
<div class="focus-list">
<span style="background-color: orange;"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script>
var imgArr = ['img/dm.jpeg','img/dm1.jpeg','img/dm3.jpg','img/dm3.jpg'];
var oWrap = document.getElementById('wrap');
var btn1 = oWrap.getElementsByTagName('button')[0];
var btn2 = oWrap.getElementsByTagName('button')[1];
var oPic = oWrap.getElementsByTagName('img')[0];
var title1 = oWrap.getElementsByTagName('p')[0];
var title2 = oWrap.getElementsByTagName('p')[1];
var leftBtn = oWrap.getElementsByTagName('button')[2];
var rightBtn = oWrap.getElementsByTagName('button')[3];
var focusList = oWrap.getElementsByClassName('focus-list')[0];
var spans = focusList.getElementsByTagName('span');//[span,span,span,span]
//點擊右箭頭,切換下一張
var step = 0; // step表示要顯示的圖片的索引值
var flag = 0; // flag用來標記循環還是順序, 0表示順序 , 1表示循環
rightBtn.onclick = function(){
//點擊一次右箭頭,step+1
step++;
if(step === 4){
// if(flag === 0){
// step = 3;
// }else{
// step = 0;
// }
flag == 0 ? step = 3 : step = 0;
}
// 取出數組中對應的圖片路徑,設置給圖片的src屬性
oPic.src = imgArr[step];
// 把title1裏面的數字同步切換
title1.innerHTML = (step+1) + '/4';
// 把title2裏面的數字同步切換
title2.innerHTML = '美女' + (step+1);
focusFllow();
}
leftBtn.onclick = function(){
//點擊一次左箭頭,step-1
step--;
if(step === -1){
flag === 0 ? step = 0 : step = 3;
}
// 取出數組中對應的圖片路徑,設置給圖片的src屬性
oPic.src = imgArr[step];
// 把title1裏面的數字同步切換
title1.innerHTML = (step+1) + '/4';
// 把title2裏面的數字同步切換
title2.innerHTML = '美女' + (step+1);
focusFllow();
}
//點擊順序按鈕,flag賦值爲0
btn1.onclick = function(){
flag = 0;
}
//點擊循環按鈕,flag賦值爲1
btn2.onclick = function(){
flag = 1;
}
// 焦點跟隨
function focusFllow(){
for(var i = 0; i < spans.length; i++){
spans[i].style.backgroundColor = "#fff";
}
spans[step].style.backgroundColor = 'orange';
}
</script>
</body>
</html>
實現效果如下
