jquery实现slide幻灯片

ciaos

浏览: 296964 次
性别:
来自: 深圳

最近访客更多访客>>

smoking_boy

yangyongjie

muyuan

dongguangming88

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

效果图如下：

代码如下：

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Try JQuery</title>
		<link rel="stylesheet" href="styles/main.css" type="text/css" />
	</head>
	<body>
		<div id="main_container">
			<div class="ad" >
				<ul class="slider" >
					<li><img src="images/ads/1.gif"/></li>
					<li><img src="images/ads/2.gif"/></li>
					<li><img src="images/ads/3.gif"/></li>
					<li><img src="images/ads/4.gif"/></li>
					<li><img src="images/ads/5.gif"/></li>
				</ul>
				<ul class="num" >
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
		</div>
		<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="scripts/main.js" type="text/javascript"></script>
	</body>
</html>

styles/main.css

/*
 base css
*/

* {
	margin: 0;
	padding: 0;
}

ul, li {
	list-style: none outside none;
}

.clear {
	clear: both;
}

/*
 page css
*/

#main_container {
	background-color: #eeeeee;
	width: 960px;
	margin: 0 auto;
}

#main_container .ad { 
	margin: 100px auto;
	width:586px; 
	height:150px; 
	overflow:hidden;
	position:relative;
}

.ad .slider,.ad .num{
	position:absolute;
}

.ad .slider li{
	display: inline;
}

.ad .num {
	bottom: 5px;
	right: 5px;
}

.ad .num li{
	float: left;
	color: #FF7300;
	cursor: pointer;
	border: 1px solid #FF7300;
	background-color: #fff;
	margin: 3px 1px;
	width: 16px;
	height: 16px;
	text-align: center;
}

.ad .num li.on{
	color: #fff;
	line-height: 21px;
	width: 21px;
	height: 21px;
	font-size: 16px;
	margin: 0 1px;
	border: 0;
	background-color: #FF7300;
	font-weight: bold;
}

scripts/main.js

$(function(){
	var showImg = function(index){
		var adHeight = $(".ad").height();
		$(".slider").stop(true,false).animate({top : -adHeight*index},1000);
		$(".num li").removeClass("on")
			.eq(index).addClass("on");
	}
	var len  = $(".num > li").length;
	var index = 0;
	var adTimer;
	$(".num li").mouseover(function(){
		index  =   $(".num li").index(this);
		showImg(index);
	}).eq(0).mouseover();	
	$('.ad').hover(function(){
			clearInterval(adTimer);
		},function(){
			adTimer = setInterval(function(){
				showImg(index)
				index++;
				if(index==len){index=0;}
			} , 3000);
	}).trigger("mouseleave");		 
});