2

我正在制作一张幻灯片，每张幻灯片上都有触发滑动运动的链接。但我不知道如何让第一张幻灯片出现在加载页面上，所以为了让它工作，我必须让第一张幻灯片可见而其他的隐藏起来，这不是一个真正的修复，只是为了让我可以继续工作，所以我需要改变它

这是小提琴

http://jsfiddle.net/Paula/XmeGN/10/

另外，我可以让它向左滑动而不是向右滑动。

谢谢大家的帮助！！

HTML

<div id="banner_container" style="min-height:160px; clear:both;">

    <div id="banner_wrapper">
    <div class="banner_panel2" id="target1">
        <a href="#target1" class="banner_panel">Target 1</a><br/>
        <a href="#target2" class="banner_panel">Target 2</a><br/>
        <a href="#target3" class="banner_panel">Target 3</a><br/>      
        Target 1
    </div>
    <div class="banner_panel" id="target2">
        <a href="#target1" class="banner_panel">Target 1</a><br/>
        <a href="#target2" class="banner_panel">Target 2</a><br/>
        <a href="#target3" class="banner_panel">Target 3</a><br/> 
        Target 2
    </div>
    <div class="banner_panel" id="target3">
        <a href="#target1" class="banner_panel">Target 1</a><br/>
        <a href="#target2" class="banner_panel">Target 2</a><br/>
        <a href="#target3" class="banner_panel">Target 3</a><br/> 
        Target 3
    </div>
</div>
</div>

​ javascript:

jQuery(function($) {

    $('a.banner_panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active');

        if (!$target.hasClass('active')) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: $this.width()
                }, 500);
            });

            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        }
    });

});​

CSS：

* {
    margin:0;
    padding:0;
    list-style:none;
}


#banner_container {
    width:880px;
    position:relative;
    background-color:#E6E6E6;
    margin:30px;
    background-image: linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247)     82%);
    background-image: -o-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%);
    background-image: -moz-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%);
    background-image: -webkit-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%);
    background-image: -ms-linear-gradient(bottom, rgb(207,207,207) 22%, rgb(247,247,247) 82%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.22, rgb(207,207,207)),
    color-stop(0.82, rgb(247,247,247))
);
    border:1px #CCC solid;
    border-radius:10px;
    -moz-border-radius:10px;
    padding:20px 10px 10px 10px;
    overflow:hidden;
    }
    

#banner_wrapper{
    width:890px;
    position:relative;
    z-index:5;
    }

div.banner_panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display:none;
}
div.banner_panel2 {
    position: absolute;
    height: 100%;
    width: 100%;
}
​
4

2 回答 2

1

将活动添加到 target1，我还将展示如何删除 panel2

 <div id="banner_wrapper">
    <div class="active banner_panel" id="target1">
        <a href="#target1" class="active banner_panel">Target 1</a><br/>
        <a href="#target2" class="banner_panel">Target 2</a><br/>
        <a href="#target3" class="banner_panel">Target 3</a><br/>      
        Target 1
    </div>
    <div class="banner_panel" id="target2">
        <a href="#target1" class="banner_panel">Target 1</a><br/>
        <a href="#target2" class="banner_panel">Target 2</a><br/>
        <a href="#target3" class="banner_panel">Target 3</a><br/> 
        Target 2
    </div>
    <div class="banner_panel" id="target3">
        <a href="#target1" class="banner_panel">Target 1</a><br/>
        <a href="#target2" class="banner_panel">Target 2</a><br/>
        <a href="#target3" class="banner_panel">Target 3</a><br/> 
        Target 3
    </div>
</div>

javascript:

jQuery(function($) {

    $('a.banner_panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active');

        if (!$target.hasClass('active')) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: $this.width()
                }, 500);
            });

            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        }
    });

});​

$('div.banner_panel.active').show();

小提琴：http: //jsfiddle.net/XmeGN/18/

于 2012-09-02T22:37:06.133 回答
0

宝拉，

  • 在 HTML 中，更改class="banner_panel2"并class="banner_panel"删除banner_panel2.
  • （可选）display:none;从div.banner_panel {...}.
  • $("div.banner_panel").eq(0).find('a.banner_panel').eq(0).trigger('click'); 在单击处理程序定义之后添加。调整一个或两个eq(0)表达式以选择您选择的任何其他面板作为初始面板。

此外，e.preventDefault();在点击处理程序的顶部添加。当单击指向当前活动面板的链接时，这会抑制不良影响。

Javascript 现在应该如下所示：

$('a.banner_panel').on('click', function(e) {
    e.preventDefault();
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active');

    if (!$target.hasClass('active')) {
        $other.removeClass('active').each(function(index, self) {
            var $this = $(this);
            $this.animate({
                left: $this.width()
            }, 500);
        });
        $target.addClass('active').show().css({
            left: -($target.width())
        }).animate({
            left: 0
        }, 500);
    }
});
$("div.banner_panel").eq(0).find('a.banner_panel').eq(0).trigger('click');

演示

用户（可能）会看到页面加载的飞入效果，但也许这不是坏事。

这样做可以确保面板的初始状态与用户为他/她自己单击时的状态相同。如果将来您更改点击处理程序以做一些稍微不同的事情，那么您不必担心检查 HTML/CSS 是否兼容。如果用户点击一切正常，那么初始状态也可以。

于 2012-09-02T22:46:36.727 回答