1

我有以下 HTML 代码：

<section class="gallery">
 <a href="" id="link-prev">prev</a>
 <a href="" id="link-next">next</a>
 <div class="holder">
  <ul id="slider">
   <li>
    <img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
   </li>
   <li>
    <img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
   </li>
   <li>
    <img src="" alt="#" width="306" height="240" />
    <span>Picture Title</span>
   </li>
   <li>
    <img src="" alt="#" width="306" height="240" />
    <span>Picture Title</span>
   </li>
  </ul>
 </div>
</section>

以及以下js：

$(document).ready(function(){
    $('#slider').cycle({
        fx:'scrollHorz',
        timeout: 5000,
        prev:'#link-prev',
        next: '#link-next'
    })
    //$(".form-contact form").validate();
})

这很好用，但它只显示一张图片，如果我想看下面的，我点击下一步，如果我想看上一张，我点击上一张。如何每次转换显示多张图片？

基本上，就像这个例子：滚动，但每次转换显示不止一张图片......

编辑：当我试图在每张幻灯片中有两张图片时，我拥有的实际 HTML 是这个：

<section class="gallery">
 <a href="" id="link-prev">prev</a>
 <a href="" id="link-next">next</a>
 <div class="holder">
  <ul id="slider">
   <div>
    <img src="assets/content/pages/carrousell/UrbanFlame.jpg" alt="#" width="306" height="240" />
    <img src="assets/content/pages/carrousell/TannourineRestaurant.jpg" alt="#" width="306" height="240" />
   </div>
   <div>
  <img src="assets/content/pages/carrousell/PanchoVillaTaqueria.jpg" alt="#" width="306" height="240" />
  <img src="assets/content/pages/carrousell/LaLanterna.jpg" alt="#" width="306" height="240" />
   </div>
  </ul>
 </div>
</section>

CSS就是这个：

.gallery .holder{
    border-radius: 10px;
    position:relative;
    padding:4px 0 4px 0px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.gallery #link-prev,
.gallery #link-next{
    position:absolute;
    width:47px;
    height:83px;
    text-indent:-9999px;
    overflow:hidden;
    top:75px;
    z-index:99999;
    background:url(navigati.png) no-repeat;
}
.gallery #link-prev{left:-19px;}
.gallery #link-next{right:-19px;}
.gallery #link-next{background-position:-48px 0;}
.gallery h3{
    color:#33638b;
    font-size:18px;
    line-height:21px;
    margin:0 0 1px;
    text-align:center;
}
#slider{
    padding:0;
    width:306px;
    margin: 0 auto;
}
#slider li{
    list-style:none;
    text-align:center;
    color:#FFFFFF;
    font-size:14px;
    line-height:17px;
    padding:0px 0 0;
    width:306px;
}
#slider img{
    position:relative;
}
#slider span{
    width:286px;
    display:block;
    padding:20px 10px;
    background:url(../images/slider_span_bg.jpg) repeat-x left top; height:18px;}
#slider a{color:#33638b; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:18px;}
4

2 回答 2

2

你的<!-- picture link !-->积木里有什么？
根据 Cycle 文档（和示例），标记应如下所示：

<div id="slider">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
    <!-- ... -->
</div>

编辑：

一次转换中的两张图片

var curElement = null;

$('#s1').cycle({
    fx:     'scrollHorz',
    prev:   '#prev1',
    next:   '#next1',
    timeout: 0,
    after: function(currSlideElement, nextSlideElement, options, forwardFlag)
    {
      if (forwardFlag === 1 && (currSlideElement != curElement || curElement == null))
      {
          curElement = nextSlideElement;
          $("#next1").trigger('click');
      }
      else if ( forwardFlag === 0 && (currSlideElement != curElement || curElement == null))
      {
          curElement = nextSlideElement;
          $("#prev1").trigger('click');
      }
    }
});

编辑 2

问题在于#slider风格。将其宽度设置为 fe 620px

#slider{
    padding:0;
    width:620px;
    margin: 0 auto;
}
于 2012-05-04T21:09:56.060 回答
0

我不确定 Cycle 插件是否会在不编辑源代码的情况下处理该问题。

看起来这个选项可能很有用：

onPrevNextEvent: null,// callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)

似乎您应该能够触发下一个或上一个单击 onPrevNextEvent。

像这样的东西：

$('#slider').cycle({
    fx:'scrollHorz',
    timeout: 5000,
    prev:'#link-prev',
    next: '#link-next',
    onPrevNextEvent: function(isNext) {
        if(isNext) {
            $('#link-next').trigger('click');
        } else {
            $('#link-prev').trigger('click');
        }
    }
})
于 2012-05-04T20:53:04.163 回答