|
|
很多网站上多有轮转图片，有的是用flash的，有的是用js的，前几天用了timers这个插件，感觉很不错，就试着写一下轮转图片。
<html><head><title>Round Images</title><script type="text/javascript" src="js/jquery-1.3.1.js"></script><script type="text/javascript" src="js/jquery.timers.js"></script><script type="text/javascript">$(document).ready(function(){var imgobj = $("#pic li a img");var img0 = imgobj[0].src;var text0 = imgobj[0].title;var imgIndex = 0;$("#text").html(text0);var numul = "";for(var i=0;i<imgobj.length;i++){if(i==0){numul +="<li class='on'>"+(i+1)+"</li>";}else{numul +="<li>"+(i+1)+"</li>";}};$("#num").html(numul);var numobj = $("#num li");$("#num li").click(function(){var liobj = $(this);$("#num li").removeClass();liobj.addClass("on");changeImg(liobj.text()-1);imgIndex = liobj.text()-1;$(document).stopTime();$(document).everyTime(3000, every);});$(this).everyTime(3000, every);function changeImg(index){if(index == 0){$(imgobj[0]).attr({src:img0,title:text0}).css({opacity: 0.1}).animate({opacity: 1.0},1000);}else{$(imgobj[0]).attr({src:$(imgobj[index]).attr("src"),title:$(imgobj[index]).attr("title")}).css({opacity: 0.1}).animate({opacity: 1.0},1000);}$("#text").html($(imgobj[0]).attr("title"));}function every(){imgIndex = (imgIndex+1)%imgobj.length;numobj.removeClass();$(numobj[imgIndex]).addClass("on");changeImg(imgIndex);}});</script><style type="text/css">*{margin:0;padding:0;}img,img a{border:0;}body{height:900px;border:1px red solid;} .focus { width:400px; height:360px; position:relative; border:1px solid #D8D9DA; }/*标题*/.newindex_flash_bt{width:100%;height:35px;position:absolute;bottom:0px;left:0px;background:#000;-moz-opacity:0.5; filter:alpha(opacity=50);z-index:1;}/*广告*/.newindex_flash_btfont{width:90%;height:35px;position:absolute;bottom:0px;left:10px;z-index:2; color:#fff;padding:0px 30px 0px 50px; background:url(../images/foc.gif) no-repeat 0px 10px;line-height:33px;font-weight:bold;}.newindex_flash_btfont a{color:#fff;}.newindex_flash_btfont a:visited{color:#fff;}.newindex_flash_btfont span{margin-left:15px;}.container, .container img{width:400px;height:360px;}.container{border:0px solid #333;}.container img{border:0;}.bottom{position:absolute; bottom:0px;width:400px;filter: Alpha(Opacity=60); opacity: 0.6; background-color:#000; height:30px; line-height:30px;}.text{float:left;padding-left:5px;font-size:14px;color:#fff !important}.num{ float:right;padding-right:5px;margin:5px;}.num li{float:left;list-style:none;color: #fff;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;margin:1px;border: 1px solid #707070;background-color: #000;}.num li.on{line-height: 18px;width: 18px;height: 18px;font-size: 14px;border: 0;background-color: #FEC702;font-weight: bold;}.pic{width:400px;height:360px;overflow:hidden;}.pic li{list-style:none;}</style></head><body><div class="focus" style="left:200px;top:100px;"> <div class="container" id="idContainer2"><ul class="pic" id="pic"><li><a href="http://www.g.cn" target="_blank"><img src="images/1.jpg" alt="图片1" width="400px" height="360px" title="图片1" /></a></li><li><a href="http://www.163.com" target="_blank"><img src="images/2.jpg" alt="图片2" width="400px" height="360px" title="图片2" /></a></li><li><a href="http://www.sina.com" target="_blank"><img src="images/3.jpg" alt="图片3" width="400px" height="360px" title="图片3" /></a></li><li><a href="http://www.baidu.com" target="_blank"><img src="images/4.jpg" alt="图片4" width="400px" height="360px" title="图片4" /></a></li><li><a href="http://www.51aspx.com" target="_blank"><img src="images/5.jpg" alt="图片5" width="400px" height="360px" title="图片5" /></a></li><li><a href="http://www.caidao8.com" target="_blank"><img src="images/6.jpg" alt="图片6" width="400px" height="360px" title="图片6" /></a></li></ul><div class="bottom"><div class="text" id="text"></div> <ul class="num" id="num"> </ul> <div style="clear:both;"></div> </div> </div></div></body></html>
有一个缺陷就是在图片轮转的时候，只有简单的淡显效果，什么百叶窗等效果如果有人会的告诉我一声，谢谢 |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡