JQuery制作幻灯片(轮播图)

scenery
创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery SlideShow</title>
	<style>
		*{margin: 0;padding: 0;}
		ul,ol{list-style: none;}
		.slideShow{position: relative;margin: 100px auto;height: 140px;width:340px;overflow: hidden;}
		.slideShow ul{position: relative;width: 2000px;}
		.slideShow ul li{float: left;width: 340px;}
		.slideShow .nav{text-align: center;position: absolute;right: 10px;bottom:10px;font-size: 12px;line-height: 18px;}
		.slideShow .nav span{-webkit-user-select:none;user-select:none;float: left;cursor: pointer;border-radius:9px;display: inline-block;width: 18px;height: 18px;background: rgba(0,0,0,0.7);margin-left: 2px;color: #fff;opacity:0.5;}
		.slideShow .nav span.active{opacity: 1;}
	</style>
</head>
<body>
	<div class="slideShow">
		<ul>
			<li><a href="#"><img src="images/01.jpg"></a></li>
			<li><a href="#"><img src="images/02.jpg"></a></li>
			<li><a href="#"><img src="images/03.jpg"></a></li>
			<li><a href="#"><img src="images/04.jpg"></a></li>
		</ul>
		<div class="nav">
			<span class="active">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
	</div>
	<script src="js/jquery.js"></script>
	<script src="js/main1.js"></script>
</body>
</html>

创建main1.js

$(document).ready(function(){

	var slideShow=$(".slideShow"),
		ul=slideShow.find("ul"),
		nav=slideShow.find(".nav span"),
		oneWidth=ul.find("li").eq(0).width(),
		timer=null,
		iNow=0;
	slideShow.hover(function(){
		clearInterval(timer);
	},autoPlay);

	nav.on("click",function(){
		var me=$(this),
			index=me.index();
		iNow=index;
		ul.animate({
			"left":-oneWidth*iNow
		});
		nav.removeClass("active");
		me.addClass("active");
	});

	autoPlay();

	function autoPlay(){
		timer=setInterval(function(){
			iNow++;
			if(iNow>nav.length-1){
				iNow=0;
			}
			nav.eq(iNow).trigger("click");
		},2000);
	}

	

});

Leave a Comment