Jquery幻灯片不工作 [英] Jquery Slideshow Not working

问题描述

我创建了一个简单的幻灯片，但它不工作。
我使用函数和setInterval，但仍然看不到任何效果。
在 css selector 上的任何错误

i have create a simple slideshow but its not working. i have used function and setInterval but still cant see any effect. also any mistake on css selector

function slideshow() {
     	var $active = $('DIV#slider-wrap IMG.active');
     	var $next = $active.next();
     	$next.addClass('active');
     	$active.removeClass('active');
     }
     $(function(){
         setInterval("slideshow",5000);
     });

	  	* {
	  		margin:0;
	  		padding:0;
	  	}	
	  	#slider-wrap {
	  		position:relative;
	  	}
	  	.slideshow .images {
	  		width:100%;
	  		max-width:960px;
	  		height:350px;
	  		overflow:hidden;
	  	}
	  	.slideshow .images img {
                 position:absolute;
                 width:100%;
                 max-width:960px;
                 height:auto;
	  	}
	  	.active {
	  		z-index:99;
	  	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider-wrap">
      <div class="slideshow">
      	   <div class="images">
				<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="" class="active">
				<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
				<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
				<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
      	   </div>
      </div>	
  </div>

>

推荐答案

javascript setInterval 接受函数而不是字符串作为第一个参数。

javascript setInterval accepts as first argument a function and not a string.

function slideshow() {
  var $active = $('div#slider-wrap img.active');
  var $next = $active.next();
  $next.addClass('active');
  $active.removeClass('active');
}
$(function() {
  setInterval(slideshow, 1000);
});

* {
  margin: 0;
  padding: 0;
}
#slider-wrap {
  position: relative;
}
.slideshow .images {
  width: 100%;
  max-width: 960px;
  height: 350px;
  overflow: hidden;
}
.slideshow .images img {
  position: absolute;
  width: 100%;
  max-width: 960px;
  height: auto;
}
.active {
  z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider-wrap">
  <div class="slideshow">
    <div class="images">
      <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="" class="active">
      <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
      <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
      <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
    </div>
  </div>
</div>

这篇关于Jquery幻灯片不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！