首页 新闻 搜索 专区 学院

关于http://zhidao.baidu.com/s/enterprise/中的最上面的图片滚动效果是怎么做的?

0
[已解决问题] 解决于 2013-01-07 10:35

是怎么用jquery实现的?谁能给我提供个大体思路啊?

微澜的主页 微澜 | 初学一级 | 园豆:-1
提问于:2013-01-05 16:28
< >
分享
最佳答案
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
chenping2008 | 大侠五级 |园豆:9836 | 2013-01-05 17:37

谢谢,不过这个demo里,没有自动切换图片的效果...另外chrome开发工具比起FireFox的FireBug和IE的开发人员工具哪个好用些?

微澜 | 园豆:-1 (初学一级) | 2013-01-06 11:22

@微澜: 自己洗个定时器,就行了啊。本人倾向于用chrome开发者工具

chenping2008 | 园豆:9836 (大侠五级) | 2013-01-06 14:06

@chenping2008: 嗯,谢谢了

微澜 | 园豆:-1 (初学一级) | 2013-01-07 10:34
其他回答(1)
0

你把网页保存下来,把用到的脚本,样式,图片全下载出来,整理一下,就应该可以得到一个DEMO吧

KivenRo | 园豆:1722 (小虾三级) | 2013-01-05 16:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册