JQuery 图片广告切换

最新推荐文章于 2023-12-08 15:24:23 发布

iteye_8678

最新推荐文章于 2023-12-08 15:24:23 发布

阅读量124

点赞数

分类专栏： jQuery 文章标签： jQuery CSS HTML ViewUI

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

[color=darkred]简单实现图片切换呵呵 [/color]

<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{
	width:140px;
	height:120px;
	line-height:25px;
	border:#ccc 0px solid;
	overflow:hidden
}
#scrollDiv li{
	height:25px;
	padding-left:10px;
}
.paging a {
	border:1px solid #FFFFFF;
	color:#EEEEEE;
	font-size:75%;
	font-weight:bold;
	margin:0pt 0pt 5px;
	padding:0pt 5px;
	text-decoration:none;
}
</style>

<script type = "text/javascript">
	var runTime 
	var curNew = 0;
	var news = 0;
	jQuery(function ($) {
		news = $('#scroll-container li');
		var paging = $("#paging");
		$('#scroll-container li').each(function(i,el){
			var n = $("<span></span>");
			paging.append(n.html("<a href=\"javascript:;\" onclick=\"javascript:curNew="+(i-1)+";scroll_news("+(i)+");\">"+(i+1)+"</a>"));
		});
		scroll_news(curNew);

	});
	function scroll_news(index){  
		curNew=curNew+1;
		if(curNew>=news.length)curNew=0;
		$('#scroll-container li').each(function(i,el){
			if(index==i) {
				$(el).show();
			} else {
				$(el).hide();
			}
		});
		$('#paging span').each(function(i,el){
			if(index==i) {
				$(el).css({ background: "red" }); 
			} else {
				$(el).css({ background: "#000" });
			}
		});
		if(runTime)window.clearTimeout(runTime);
		runTime=window.setTimeout("scroll_news("+curNew+")",4000);
    }
</script>

<body>
<div id="scrollDiv">
	<ul id="scroll-container" style="margin-top: 0px;">
		<li><img width="120" height="120" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
		<li><img width="120" height="120" src="http://static.flickr.com/120/199481072_b4a0d09597_s.jpg" alt="" /></li>
		<li><img width="120" height="120" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
		<li><img width="120" height="120" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
		<li><img width="120" height="120" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
		<li><img width="120" height="120" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
		<li><img width="120" height="120" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li>
		<li><img width="120" height="120" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li>
		<li><img width="120" height="120" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
		<li><img width="120" height="120" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li>
	</ul> 
</div>
<div id="paging" class="paging">
</div>
</body>