请问为什么我的第三张图片播完之后,不是马上接上第一张,而且出现一张空白
来源:3-7 点击圆点切换图片(2)
hpbrave
2018-03-09 13:25:25
我js完全是拷贝的老师的代码
这个是我的html
<div class="slideshow desktop" id="slideshow"> <!-- <img src="images/image1.jpg"> --> <a href=""> <div class="slide slide1" id="slide1"></div> </a> <a href=""><div class="slide slide2" id="slide2"></div></a> <a href=""><div class="slide slide3 " id="slide3"></div></a> <a href="javascript:void(0)" class="button prev" id="prev"></a> <a href="javascript:void(0)" class="button next" id="next"></a> <!-- -three little dots- --> <div class="dots" id="dots"> <span class="active"></span> <span ></span> <span ></span> </div> </div> <!--end of slideshow -->
这个是我的js:
var timer = null,
index = 0,
pics = byId("slideshow").getElementsByTagName("div"),
dots = byId("dots").getElementsByTagName("span"),
size = pics.length,
prev = byId("prev"),
next = byId("next");
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
// clear the timer, stop autoplay
function stopAutoPlay(){
if(timer){
clearInterval(timer);
}
}
// play the slide show automatically
function startAutoPlay(){
timer = setInterval(function(){
index++;
if(index >= size){
index = 0;
}
changeImg();
},2000)
}
function changeImg(){
for(var i=0,len=dots.length;i<len;i++){
dots[i].className = "";
pics[i].style.display = "none";
}
dots[index].className = "active";
pics[index].style.display = "block";
}
function slideImg(){
var main = byId("slideshow");
main.onmouseover = function(){
stopAutoPlay();
}
main.onmouseout = function(){
startAutoPlay();
}
main.onmouseout();
// change slides with dots
for(var i=0,len=dots.length;i<len;i++){
dots[i].id = i;
dots[i].onclick = function(){
index = this.id;
changeImg();
}
}
// next slide
next.onclick = function(){
index++;
if(index>=size) index=0;
changeImg();
}
// previous slide
prev.onclick = function(){
index--;
if(index<0) index=size-1;
changeImg();
}
}
slideImg();非常感谢!
3回答
你的html结构跟老师的都不一样,怎么可以直接用它的js呢。图片的长度获取错了,请参考下图修改

怎么都被占用了呢
2018-03-12
刚开始的时候第一张图片是要默认显示的。可如下修改

好帮手慕星星
2018-03-09
可以把你的css代码粘贴一下吗?这样可以更方便的解决问题哦。
相似问题