思路：每次选择图片，通过修改img标签的src属性，来展示轮播。
html:
<div id="loopDiv">
<img id="pic"/>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="left" class="chooseBut"><</div>
<div id="right" class="chooseBut">></div>
</div>
样式：
<style>
#loopDiv{
position:relative;
width:500px;
height:600px;
margin:0 auto;
}
#list{
list-style:none;
position:absolute;
bottom:10px;
left:150px;
height:20px;
}
#list li{
float:left;
width:20px;
height:20px;
line-height:20px;
text-align:center;
border-radius:50%;
background:#aaa;
margin-right:10px;
cursor:pointer;
}
.chooseBut{
width:50px;
height:80px;
background-color:rgba(0,0,0,0.2);
color:#fff;
font-size:30px;
line-height:80px;
text-align:center;
display:block;
cursor:pointer;
}
#left{
position:absolute;
left:0px;
top:220px;
}
#right{
position:absolute;
right:0px;
top:220px;
}
#pic{
width:500px;
height:550px;
}
</style>
JS:
<script>
var loopDiv=document.getElementById("loopDiv");
var imgs=["./img/down.png",
"./img/switch.png",
"./img/arrow_up.png",
"./img/down1.png",
"./img/switch.png"]
var img=document.getElementById("pic");
var lis=document.getElementsByTagName("li");
var currentPage=0;
var left=document.getElementById("left");
var right=document.getElementById("right");
function changeImg(pos) {
if(pos==6){
pos=1;
currentPage=0;
}
if(pos==0){
pos=5;
currentPage=5;
}
img.src=imgs[pos-1];
for(var i=0;i
lis[i].style.backgroundColor ="#aaa";
}
lis[pos-1].style.backgroundColor ="#eb3326";
currentPage=pos;
}
//启动定时器
window.onload=timer;
var timer=setInterval(func,1000);
function func() {
currentPage++;
changeImg(currentPage);
}
loopDiv.addEventListener("mouseover",func1,false);
function func1() {
//停止定时器
clearInterval(timer);
}
//鼠标移出
loopDiv.addEventListener("mouseout",func2,false);
function func2() {
//重启定时器
timer =setInterval(func,1000);
}
//进入小圆点
for (var j =0;j
lis[j].onclick =function() {
changeImg(parseInt(this.innerHTML));
};
}
left.onclick=function() {
currentPage--;
changeImg(currentPage);
};
right.onclick=function() {
currentPage++;
console.log(currentPage);
changeImg(currentPage);
};
</script>
