//实现轮播图部分star
$(document).ready(function(){
var container=document.getElementById("container")
var imgs=document.getElementById("imgs")
var circle=document.getElementById("circle").getElementsByTagName("li")
var prev=document.getElementById("prev")
var next=document.getElementById("next")
var index=1
//var imgWidth=container.offsetWidth
function showButton(){
for (var i=0;i<circle.length;i++){
if (circle[i].className=="current"){
circle[i].className="";
break;
}
}
circle[index-1].className="current" //?
}
function animate(offset){
var newLeft=parseInt(imgs.style.left)+offset;
//注意这个是一个数字,不含px
imgs.style.left=newLeft+"px";
if (newLeft<-4130){
imgs.style.left=0+"px";
}
if (newLeft>100){
imgs.style.left=-4130+"px";
}
}
next.onclick=function(){
if(index==8){
index=1;
}
else{
index+=1;
}
showButton();
animate(-590)
}
prev.onclick=function(){
if(index==1){
index=8;
}
else{
index-=1;
}
showButton();
animate(590)
}
for (i=0;i<circle.lenght;i++){
circle[i].onclick=function(){
var myIndex=parseInt(this.index); //获取自带属性 转化为数字
//var myIndex=this.getAttribute("index") 获取自定义属性
var offset= -590*(myIndex-index); //每次点击小圆点时的偏移量
animate(offset);
index=myIndex;
}
}
//next.onclick=function(){
// imgs.style.left=parseInt(imgs.style.left)-590+"px";
// }
// prev.onclick=function(){
// imgs.style.left=parseInt(imgs.style.left)-590+"px";
// }
})
//实现轮播图部分end
<div class="grid-col2-l fl" id="container">
<ul class="imgs" id="imgs" style="left:0px">
<li><a href="#"><img src="images/5be7e35bN1a184f0f.jpg" height="480" width="590" alt=""></a></li> <!--因为鼠标放在当前图片也有点击效果,所以图片外包了一个a-->
<li><a href="#"><img src="images/5be6bfb7Nfaff38b5.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be5878aN270b37b2.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be6573aN329b0238.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be54412Nb1dc3080.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be51fccN3358a3ab.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be80d86N44726e9c.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be91499N0e05ca89.jpg" height="480" width="590" alt=""></a></li>
</ul>
<div class="arrow">
<a href="#" class="arrow-l" id="prev"><</a>
<a href="#" class="arrow-r" id="next">></a>
</div>
<ul class="circle" id="circle">
<li class="current" index="1"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
<li index="5"></li>
<li index="6"></li>
<li index="7"></li>
<li index="8"></li>
</ul>
</div>