|
|
简单实现图片切换 呵呵
<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> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡