jquery图片自动轮播怎么设置？求高手

<scriptsrc="../../jquery/jquery-1.8.2.min.js/jquery-1.8.2.min.js"></script><script>$(... <script src="../../jquery/jquery-1.8.2.min.js/jquery-1.8.2.min.js">
</script>
<script>
$(function(){

var w=$("img").width();

$("#num span").hover(function(){
var me=$(this);
me.addClass("cut").siblings("#num span").removeClass("cut");
$("#pol").stop().animate({left:"-"+w*me.index()+"px"});

});

});

</script>
<style>
#pic{width:410px; height:200px; margin:0 auto; margin-top:150px;}
#pic #po{width:370px; overflow:hidden; height:170px; left:20px;; top:10; position:relative;}
#pic #pol{width:2370px; height:165px; position:absolute;}
#pic #num{
width:120px;
height:25px;
position:absolute;
z-index:2;
left: 247px;
top: 140px;

}
#pic #num span{width:10px; margin-left:10px; cursor:pointer; font-size:12px; height:20px; float:left; color:#000000; text-align:center;}
#pic #num span.cut{background:#000000; color:#FFFFFF;}
img{width:370px; height:165px; float:left}

</style>
</head>

<body>
<div id="pic">
<div id="po">
<div id="pol">
<img src="../../图片/素材/738b4710b912c8fcbb648ccdfe039245d688211e.jpg" />
<img src="../../图片/素材/9f510fb30f2442a76c08f9a4d343ad4bd11302a8.jpg" />
<img src="../../图片/素材/fd039245d688d43f76f37f527e1ed21b0ef43b3c.jpg" />
<img src="../../图片/素材/11385343fbf2b21154e02b29c88065380dd78e8f.jpg" />
<img src="../../图片/素材/a08b87d6277f9e2f7dd1b36f1d30e924b999f3f5.jpg" />
</div>
<div id="num">
<span class="cut">
1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span></div>

</div>

</div>

用过setInterval()和setTimeout()但用法不对，求高手帮忙。
让图片自动按顺序播放展开

 我来答

1个回答

#热议# 为什么有人显老，有人显年轻？

yugi111
2015-04-11 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

<!DOCTYPE HTML>
<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
#pic {
	width: 410px;
	height: 200px;
	margin: 0 auto;
	margin-top: 150px;
}

#pic #po {
	width: 370px;
	overflow: hidden;
	height: 170px;
	left: 20px;;
	top: 10;
	position: relative;
}

#pic #pol {
	width: 2370px;
	height: 165px;
	position: absolute;
}

#pic #num {
	width: 120px;
	height: 25px;
	position: absolute;
	z-index: 2;
	left: 247px;
	top: 140px;
}

#pic #num span {
	width: 10px;
	margin-left: 10px;
	cursor: pointer;
	font-size: 12px;
	height: 20px;
	float: left;
	color: #000000;
	text-align: center;
}

#pic #num span.cut {
	background: #000000;
	color: #FFFFFF;
}

img {
	width: 370px;
	height: 165px;
	float: left
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	jQuery (function ($)
    {
		var CRT = 0;
	    var w = $ ("img").width (), pol = $("#pol"), spans = $ ("#num span");
	    spans.hover (function ()
	    {
		    var me = $ (this);
		    me.addClass ("cut").siblings (".cut").removeClass ("cut");
		    spans.eq(CRT).clearQueue();
		    pol.stop ().animate (
		    {
			    left : "-" + w * (CRT = me.index ()) + "px"
		    }, "slow");
	    }, function()
	    {
	    	anony();
	    });
	    
	    var anony = function ()
	    {
	    	CRT++;
	    	CRT = CRT > spans.length - 1 ? 0 : CRT;
	    	spans.eq(CRT).clearQueue().delay(1000).queue (function()
	    	{
	    		spans.eq(CRT).triggerHandler ("mouseover");
	    		anony();
	    	});
	    };
	    
	    anony();
    });
</script>
</head>
<body>
	<div id="pic">
		<div id="po">
			<div id="pol">
				<img src="../../图片/素材/738b4710b912c8fcbb648ccdfe039245d688211e.jpg" /> 
				<img src="../../图片/素材/9f510fb30f2442a76c08f9a4d343ad4bd11302a8.jpg" /> 
				<img src="../../图片/素材/fd039245d688d43f76f37f527e1ed21b0ef43b3c.jpg" /> 
				<img src="../../图片/素材/11385343fbf2b21154e02b29c88065380dd78e8f.jpg" /> 
				<img src="../../图片/素材/a08b87d6277f9e2f7dd1b36f1d30e924b999f3f5.jpg" />
			</div>
			<div id="num">
				<span class="cut"> 1</span> 
				<span>2</span> 
				<span>3</span> 
				<span>4</span> 
				<span>5</span>
			</div>
		</div>
	</div>
</body>
</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

jquery图片自动轮播怎么设置？求高手

其他类似问题

为你推荐：