Question

我目前正在尝试修改jQuery幻灯片插件。我想要做的是在页面加载时首先显示中间幻灯片，而不是html元素集中的第一张幻灯片。我已经设法让溢出可见，因为我计划在滑块的两侧覆盖半透明层，使中间的幻灯片可见。

我可以找到我修改过的滑块here

可以找到修改过的插件js文件here

CSS / HTML：

<style type="text/css">
.simpleSlide-container {
    margin: auto 0 auto 0;
    width: 496px;
    height: 300px;
}
.simpleSlide-window {
    margin-left: 48px;
}
.buttons {
    height: 48px;
    width: 496px;
    margin-top: -174px;
    z-index: 9999;

}
.left-button {
    background-image: url(arrows-left.png);
    background-color: transparent;
    background-repeat: no-repeat;
    height: 48px;
    width: 48px;
    background-position: -0px -0px;
    z-index: 9999;
    position:relative;
    left: 24px;
} 
.left-button:hover { 
    height: 48px; 
    width: 48px; 
    background-position: -48px -0px; 
} 
.right-button {
    background-image: url(arrows-right.png);
    background-color: transparent;
    background-repeat: no-repeat;
    height: 48px;
    width: 48px;
    background-position: -0px -0px;
    z-index: 9999;
    position: relative;
    left: 424px;
    bottom: 48px;
} 
.right-button:hover { 
    height: 48px; 
    width: 48px; 
    background-position: -48px -0px; 
} 
</style>

<body>
<div class="simpleSlide-container">
<div class="simpleSlide-window" rel="group_name">
  <div class="simpleSlide-tray" rel="group_name">

    <div class="simpleSlide-slide" rel="group_name" style="float: left; display: inline-block; opacity: 1;"> 
    <div><img src="13.jpg" /></div>  
    </div>

    <div class="simpleSlide-slide" rel="group_name" style="float: left; display: inline-block; opacity: 1;"> 
    <div><img src="30.jpg" /></div>  
    </div>


    <div class="simpleSlide-slide" rel="group_name" style="float: left; display: inline-block; opacity: 1;"> 
    <div><img src="31.jpg" /></div> 
    </div>

  </div>
</div>
<div class="buttons">
<div class="left-button" rel="group_name"></div>
<div class="right-button" rel="group_name"></div>
</div>
</div>
</body>

谢谢

Answer 1

你有没有看过你的JS脚本？

我找到了prev，next，jumpto按钮的事件

$('.left-button, .right-button, .jump-to').live('click', function() {

        var rel = $(this).attr('rel');

        if (!$('div.simpleSlide-tray[rel="' + rel + '"]').is(':animated')) {
            simpleSlideAction(this, rel);
        };
});

从上面的片段我会说它与下面的两行有关

var rel = $(this).attr('rel');

simpleSlideAction(this, rel);

SimpleSlide Jquery sideshow mod？

1 个答案: