关于http://zhidao.baidu.com/s/enterprise/中的最上面的图片...

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

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

查看完整描述

2 回答

尚方宝剑之说

TA贡献1788条经验获得超4个赞

按照百度的源代码做了一个简单的（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>

反对回复 2018-12-24

牛魔王的故事

TA贡献1830条经验获得超3个赞

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

反对回复 2018-12-24

热搜

最近搜索清空

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

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

2 回答

添加回答