轮播js

最新推荐文章于 2022-08-30 11:57:18 发布

rockllee

最新推荐文章于 2022-08-30 11:57:18 发布

阅读量237

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/rockllee/article/details/79714531

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

$(function(){
	var curr = 0;
	$("#jsNav a.trigger").each(function(i){
		$(this).click(function(){
			curr = i;
			$("#js img").eq(i).fadeIn("fast").siblings("img").fadeOut("fast");
			$(this).addClass("imgSelected").siblings().removeClass("imgSelected");
		});
	});
	var timer = setInterval(function(){
		var go = (curr + 1) % 5;
		$("#jsNav a.trigger").eq(go).click();
	},3000);
	$("#js,#next,#prev").hover(function(){
		clearInterval(timer);
	},function(){
		timer = setInterval(function(){
		var go = (curr + 1) % 5;
		$("#jsNav a.trigger").eq(go).click();
	},3000);
	});
	$("#next").click(function(){
		if(curr == 4){
			var go = 0;
		}else{
			var go = (curr + 1) % 5;
		}
		$("#jsNav a.trigger").eq(go).click();
	});
	$("#prev").click(function(){
		if(curr == 0){
			var go = 4;
		}else{
			var go = (curr - 1) % 5;
		}
		$("#jsNav a.trigger").eq(go).click();
	});
});

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=gb2312">

<title></title>



<LINK rel=stylesheet type=text/css href="css/css.css">

<SCRIPT type=text/javascript src="js/jquery.js"></SCRIPT>

<SCRIPT type=text/javascript src="js/js.js"></SCRIPT>

</head>



<script type="text/javascript">

$(document).ready(function(){

  $(".area").hover(function(){

	  $(this).find(".qq").show(100);}

	  ,function(){

		$(this).find(".qq").hide(100);

	});

});

</script>

<body>

<div class="area">

	<a id=prev class="prevBtn qq" href="javascript:void(0)"></a>

	<a id=next class="nextBtn qq" href="javascript:void(0)"></a>

	<div id=js class="js">

		<div class="box01">

			<img onClick="location.href='http://www.baidu.com/'"  src="images/1.jpg">

			<img onClick="location.href='http://www.baidu.com/'"  style="DISPLAY: none" src="images/1.jpg"> 

			<img onClick="location.href='http://www.baidu.com/'" style="DISPLAY: none"  src="images/1.jpg">

			<img onClick="location.href='http://www.baidu.com/'" style="DISPLAY: none"  src="images/1.jpg"> 

			<img onClick="location.href='http://www.baidu.com/'" style="DISPLAY: none" src="images/1.jpg">	

		</div>

		<div class="bg"></div>

		<div id=jsNav class=jsNav>	

			<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 class="trigger" href="javascript:void(0)">4</a>

			<a class="trigger" href="javascript:void(0)">5</a>		

		</div>

	</div>

</div>

</body>

</html>