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();
})

これは問題なく動作しますが、表示される画像は1つだけです。次の画像を表示する場合は[次へ]をクリックし、前の画像を表示する場合は[前へ]をクリックします。トランジションごとに複数の画像を表示するにはどうすればよいですか？

基本的に、この例のように：スクロールしますが、トランジションごとに複数の画像を表示します。

編集：各スライドに2枚の写真を入れようとしたときに実際に使用する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>

編集：

1 回のトランジションで 2 つの画像

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 に答える