asp网站首页轮播
0
最佳答案
0
- 1
- 2
- 3
- 4
- 5
收获园豆：30
这里回答问题无法引用js代码和css样式文件
switch-pic.css如下所示：下载地址：http://files.cnblogs.com/cmsdn/switch-pic.css
.width400 .switch img{border:0px;} .width400 .switch{width:400px;height:225px;position:relative; text-align:center; overflow:hidden; padding-top:2px;} .width400 .switch .img1{display:inline;width:393px;height:222px;} .width400 .switch .img2{display:none;width:393px;height:222px;} .width400 .switch .switch_text{position:absolute;z-index:10;top:200px;right:20px;height:20px;} .width400 .switch .switch_text .number_nav{display:inline; float:left;} .width400 .switch .switch_text .number_nav ul{font:12px arial, helvetica, sans-serif;padding:0px;margin: 0px; list-style-type:none;color:#ffffff;} .width400 .switch .switch_text .number_nav ul li{float:left;font-weight:bold;background:#000;float:left;margin-right:5px;width:18px;cursor:pointer;line-height:14px;height:14px;text-align:center;filter:alpha(opacity=75);-moz-opacity:0.75;opacity: 0.75;} .width400 .switch .switch_text .number_nav ul .color1{background-color:#5aa608;} .width400 .switch .switch_text .number_nav ul .color2{background-color:#000000;}
switch-pic.js如下所示：下载地址：http://files.cnblogs.com/cmsdn/switch-pic.js
var _c = _h = 0; $(document).ready(function() { $('#play li').click(function() { var i = $(this).attr('alt') - 1; clearInterval(_h); _c = i; play(); change(i); }) $("#pic img").hover(function() { clearInterval(_h) }, function() { play() }); play(); }) function change(i) { $("#play li").css('background-color', '#000000').eq(i).css('background-color', '#5aa608').blur(); $("#pic img").fadeOut('slow').eq(i).fadeIn('slow'); } function play() { _h = setInterval("auto()", 3000); } function auto() { _c = _c > $("#pic img").length - 2 ? 0 : _c + 1; change(_c); }
Html代码如下所示：
<body> <div class="width400"> <div class="switch" id="pic"> <a href="http://hg.mydreamyulinzz.com" target="_blank"><img class="img2" alt="mydream雨林制作团队" src="http://images.cnblogs.com/cnblogs_com/cmsdn/376923/r_pic1.jpg"></a> <a href="http://hg.mydreamyulinzz.com" target="_blank"><img class="img1" alt="mydream雨林制作团队" src="http://images.cnblogs.com/cnblogs_com/cmsdn/376923/r_pic2.jpg"></a> <a href="http://hg.mydreamyulinzz.com" target="_blank"><img class="img2" alt="mydream雨林制作团队" src="http://images.cnblogs.com/cnblogs_com/cmsdn/376923/r_pic3.jpg"></a> <a href="http://hg.mydreamyulinzz.com" target="_blank"><img class="img2" alt="mydream雨林制作团队" src="http://images.cnblogs.com/cnblogs_com/cmsdn/376923/r_pic4.jpg"></a> <a href="http://hg.mydreamyulinzz.com" target="_blank"><img class="img2" alt="mydream雨林制作团队" src="http://images.cnblogs.com/cnblogs_com/cmsdn/376923/r_pic2.jpg"></a> <div class="switch_text"> <div class="number_nav"> <ul id="play"> <li class="color2" alt="1" title="mydream雨林制作团队">1</li> <li class="color1" alt="2" title="mydream雨林制作团队">2</li> <li class="color2" alt="3" title="mydream雨林制作团队">3</li> <li class="color2" alt="4" title="mydream雨林制作团队">4</li> <li class="color2" alt="5" title="mydream雨林制作团队">5</li> </ul> </div> </div> </div> </div> </body>
最后引入一下jquery插件，然后稍作修改，9张都是可以的，更改下样式和js
@xu_happy_you: 请问这个效果怎么样呢，不是太单一的轮播吧，
@觉信: 你下载运行一下看看 http://files.cnblogs.com/cmsdn/switch-pic.rar
其他回答(1)
