关于http://zhidao.baidu.com/s/enterprise/中的最上面的图片滚动效果是怎么做的?
0
[已解决问题]
解决于 2013-01-07 10:35
是怎么用jquery实现的?谁能给我提供个大体思路啊?
最佳答案
0
按照百度的源代码做了一个简单的（chrome开发工具查看的）：
<html> <head> <style> #banner { overflow: hidden; position: relative; height: 500px; } .banner-img { position: absolute; height: 500px; top: 0; right: 0; } .banner-tab { width: 639px; height: 57px; border-top-left-radius: 5px; border-top-right-radius: 5px; margin: -70px auto 0 auto; padding-top: 13px; position: relative; z-index: 2; overflow: hidden; } .banner-tab-wrap { position: relative; top: 70px; width: 639px; } .banner-tab-inner { margin: 0 auto; overflow: hidden; } .banner-item { float: left; height: 40px; width: 60px; border: 1px solid #5d5d5d; margin: 1px 11px; opacity: .3; cursor: pointer; position: relative; } .selected { border: 2px solid #444!important; margin: 0 10px; opacity: 1; } .show { z-index: 1; } </style> <script type="text/javascript" src="jquery-1.8.0.js"></script> <script> $(function(){ $("#banner,#banner-tab").mouseover(function(){ $(".banner-tab-wrap").css("top","0px"); }).mouseout(function(){ $(".banner-tab-wrap").attr("style",""); }); $("#banner-tab span").mouseover(function(){ var index = $(this).prevAll("span").length; $("#banner span").removeClass("show"); $("#banner span").hide(); $("#banner span").eq(index).show(); $("#banner span").eq(index).addClass("show"); $("#banner-tab span").removeClass("selected"); $(this).addClass("selected"); }).mouseout(function(){ }); }); </script> </head> <body> <div id="banner"> <span class="banner-img show" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic01.jpg); width: 1423px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span> <span class="banner-img" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic02.jpg); width: 1423px; display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span> <span class="banner-img" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic03.jpg); width: 1423px; display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span> <span class="banner-img" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic04.jpg); width: 1423px; display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span> </div> <div id="banner-tab" class="banner-tab"> <div class="banner-tab-wrap" > <div class="banner-tab-bg"></div> <div class="banner-tab-inner" style="width:340px"> <span class="banner-item selected"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_01.png"></span> <span class="banner-item"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_02.png"></span> <span class="banner-item"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_03.png"></span> <span class="banner-item"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_04.png"></span> </div> </div> </div> </body> </html>
奖励园豆：5
谢谢,不过这个demo里,没有自动切换图片的效果...另外chrome开发工具比起FireFox的FireBug和IE的开发人员工具哪个好用些?
@微澜: 自己洗个定时器，就行了啊。本人倾向于用chrome开发者工具
@chenping2008: 嗯,谢谢了
其他回答(1)
0
你把网页保存下来，把用到的脚本，样式，图片全下载出来，整理一下，就应该可以得到一个DEMO吧
