请问为什么我的第三张图片播完之后,不是马上接上第一张,而且出现一张空白

来源: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回答

怎么都被占用了呢

2018-03-11

你的html结构跟老师的都不一样,怎么可以直接用它的js呢。图片的长度获取错了,请参考下图修改

http://img.mukewang.com/climg/5aa4baa8000195b506870050.jpg

0
hpbrave
h 非常感谢!我一直觉得我和老师的html结构是一致的 结果刚才看了一下,果然还有其他的div。按照你说的改了之后果然解决问题了。还想再请问一下啊,我现在刚打开页面或者重新刷新页面之后,刚开始并没有显示第一张图片,而是先空白3秒再出现第二张,接下来的轮播倒都是正常的,请问是为什么啊
h018-03-11
共1条回复

怎么都被占用了呢

2018-03-12

刚开始的时候第一张图片是要默认显示的。可如下修改

http://img.mukewang.com/climg/5aa5da9200015fc606140168.jpg

1
hpbrave
h 非常非常感谢!
h018-03-12
共1条回复

好帮手慕星星

2018-03-09

可以把你的css代码粘贴一下吗?这样可以更方便的解决问题哦。

0
hpbrave
h 崩溃了 这排版。。。要不要我重新写一个问题 然后把html css js代码都附上?还是这种没换行的 也能凑合看?
h018-03-09
共2条回复

0 学习 · 36712 问题

查看课程