jquery幻灯片简单实现方法

最新推荐文章于 2025-09-12 10:28:51 发布

原创最新推荐文章于 2025-09-12 10:28:51 发布 · 864 阅读

0 ·

CC 4.0 BY-SA版权

web 同时被 2 个专栏收录

101 篇文章

订阅专栏

jquery

15 篇文章

订阅专栏

本文介绍了一种使用jQuery实现幻灯片和轮播图的简单方法，包括自动翻页、手动切换、前翻后翻按钮以及鼠标悬停暂停自动翻页的功能。

方法一
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery幻灯片简单实现方法</title>
<SCRIPT type=text/javascript src="js/jquery.js"></SCRIPT>
<SCRIPT>
	//<![CDATA[
$(function(){
	(function(){
		var curr = 0;
		$("#jsNav .trigger").each(function(i){
			$(this).click(function(){
				curr = i;
				$("#js img").eq(i).fadeIn("slow").siblings("img").hide();
				$(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
				return false;
			});
		});
		
		var pg = function(flag){
			//flag:true表示前翻， false表示后翻
			if (flag) {
				if (curr == 0) {
					todo = 2;
				} else {
					todo = (curr - 1) % 3;
				}
			} else {
				todo = (curr + 1) % 3;
			}
			$("#jsNav .trigger").eq(todo).click();
		};
		
		//前翻
		$("#prev").click(function(){
			pg(true);
			return false;
		});
		
		//后翻
		$("#next").click(function(){
			pg(false);
			return false;
		});
		
		//自动翻
		var timer = setInterval(function(){
			todo = (curr + 1) % 3;
			$("#jsNav .trigger").eq(todo).click();
		},4000);
		
		//鼠标悬停在触发器上时停止自动翻
		$("#jsNav a").hover(function(){
				clearInterval(timer);
			},
			function(){
				timer = setInterval(function(){
					todo = (curr + 1) % 3;
					$("#jsNav .trigger").eq(todo).click();
				},1500);			
			}
		);
	})();
});
//]]>
</SCRIPT>

</head>

<body style="text-align:center">

<!--js开始 -->
<DIV id=js class="js">
	<IMG alt="" src="images/01.jpg"> 
	<IMG style="DISPLAY: none" alt="" src="images/02.jpg"> 
	<IMG style="DISPLAY: none" alt="" src="images/03.jpg"> 
	<DIV id=jsNav class=jsNav>
		<A id=prev class=prevBtn href="javascript:void(0)"></A>
		<A class="trigger imgSelected" href="javascript:void(0)">1</A>
		<A class=trigger href="javascript:void(0)">2</A>
		<A class=trigger href="javascript:void(0)">3</A>
		<A id=next class=nextBtn href="javascript:void(0)"></A>
	</DIV>
</DIV>
<!--js结束-->
</body>
</html>

方法二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<script type="text/javascript" src="jquery.js"></script>
<script type = "text/javascript">
function scroll_news(){
    var firstNode = $('#scroll-container li'); //获取li对象
    firstNode.eq(0).fadeOut("slow", function(){ //获取li的第一个,执行fadeOut,并且call - function.
     $(this).clone().appendTo($(this).parent()).show(); //把每次的li的第一个 克隆，然后添加到父节点 对象。
     $(this).remove();//最后  把每次的li的第一个 去掉。
  });
}
setInterval('scroll_news()',2000);//每隔0.5秒，执行scroll_news()
</script>
</head>
<body >
<div id="scroll-container" style="height:260px;width:640px;overflow: hidden;">
  <li><img src="img/广告1.png" width="640" height="287" /></li>
  <li><img src="img/广告2.png" width="640" height="297" /></li>
  <li><img src="img/广告3.png" width="640" height="297" /></li>
</div>
</body>
</html>