Question

我有以下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();
})

这样可以正常工作，但它只显示一张图片，如果我想看到以下内容，请点击下一步，如果我想查看上一张图片，请点击上一页。如何在每次转换时显示多张图片？

基本上，就像这个例子：scroll，但每次转换显示多张图片......

编辑：我试图在每张幻灯片中放两张图片时的实际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;}

Answer 1

块内有什么内容？
根据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样式。将其宽度设置为f.e. 620px

#slider{ padding:0; width:620px; margin: 0 auto; }

Answer 2

我不确定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');
        }
    }
})

jquery Cycle中每个转换的多个图像

2 个答案: