轮播代码,JS代码库,德仔网

代码语言
代码分类
【JS】轮播
作者:B.K.Wang / 发布于2013/1/15/ 541
<!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>setInterval</title>
<script src="http://code.jquery.com/jquery-1.7.js"  type="text/javascript" ></script>
<style type="text/css">
* {
	padding: 0px;
	margin: 0px;
}
.picBox {
	width: 128px;
	height: 180px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}
#pics {
	height: 180px;
	width: 768px;
}
#pics li {
	display: inline-block;
	margin: 0;
	padding: 0px;
	float: left
}
#pics li img {
	display: block;
}
.blackBg {
	position: absolute;
	width: 128px;
	height: 25px;
	background: #000;
	bottom: 0px;
	left: 0px;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
#pageBox {
	position: absolute;
	right: 5px;
	top: 160px;
}
#pageBox i {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #FFF;
	text-align: center;
	line-height: 10px;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	color: #F0F;
	cursor: pointer;
}
#pageBox .current {
	background: #90F;
	color: #999;
}
</style>
</head>

<body>
<div class="picBox">
  <ul id="pics">
    <li ><a href="#" target="_blank"></a><img src="http://img3.douban.com/lpic/s24449694.jpg"  width="128" height="180"/></li>
    <li><img src="http://img3.douban.com/lpic/s9956135.jpg"  width="128" height="180"/></li>
    <li><img src="http://img3.douban.com/lpic/s23129805.jpg"  width="128" height="180"/></li>
    <li><img src="http://img5.douban.com/lpic/s11191019.jpg"  width="128" height="180"/></li>
    <li><img src="http://img3.douban.com/lpic/s3625785.jpg"  width="128" height="180"/></li>
    <li><img src="http://img3.douban.com/lpic/s4611317.jpg"  width="128" height="180"/></li>
  </ul>
  <div class="blackBg"></div>
  <div id="pageBox"> <i class="current">1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i> <i>6</i> </div>
</div>
<script type="text/javascript">
	$(document).ready(function (){
		var m=$("#pics li").length;
		var i=0;
		var id;
		/*定义一个函数：自动轮播的定时器*/
		function setAuto(){
			id= setInterval(function (){
				$("#pageBox i").removeClass("current");
				$("#pageBox i").eq(i).addClass("current");
				picShow(i);
				i++;
				if(i>m-1)i=0;
			},2000)
		};
		/*调用自动轮播函数*/
		setAuto();
		$("#pics").mouseenter(function (){
			clearInterval(id);
		});/*鼠标浮动到图片上清除计时器（）*/
		$("#pics").mouseleave(function (){
			setAuto();
		});
		/*为<i>绑定click事件*/
		$("#pageBox i").bind("mouseover",function(){
			clearInterval(id);
			$("#pageBox i").removeClass("current");
			$(this).addClass("current");
			i=$("#pageBox i.current").index();
			picShow(i);
			
		});
		$("#pageBox i").bind("mouseout",function(){
			setAuto();
		});
		function picShow(index){
			$("#pics").animate({marginLeft:-128*index+"px"},800);
			
		}
	})
</script>
</body>
</html>
试试其它关键字
　轮播　
同语言下
可能有用的
B.K.Wang贡献的其它代码(5)