1

このチュートリアルに従って、独自のjqueryコンテンツスライダーを作成する方法

画像スライダーを作成するには、すべて正常に動作しますが、別の div で使用する必要があります。どうすれば動作させることができますかNext?Previous

ここに以下のコードがあります

    <div class="nextprev">
       <div class="next">
          <a class="next" href="#">next</a>
       </div>

       <div class="nextborder">
       </div>

       <div class="prev">
          Prev
       </div>
    </div>


    <ul class="im"> 
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/1/1_large.jpg';?>" /><a class="next1" href="#">next</a></li>
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/2/2_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li>
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/3/3_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li> 
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/4/4_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li> 
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/5/5_large.jpg';?>" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li> 
    </ul>

内で次と前のボタンを使用したくない<li></li> ので、電話をかけてみ$('.prev').click(function(){ });ましたが機能しませんでした。これを修正するアイデアはありますか?

4

2 に答える 2

0

私はそれをテストしていませんが、このようなものはかなり普遍的に機能するはずです.

// HANDLE CLICK ON NEXT DIV
$(".next").click(function(){
    //SLIDE ONLY IF MARGIN-LEFT IS BIGGER THAN (ALL SLIDES - ONE SLIDE)*(-1)
    if($(".im").css("margin-left") > ($(".im").width()-$(".im").find("img").width())*(-1)){
        // SET MARGIN-LEFT TO MARGIN-LEFT - ONE SLIDE
        $(".im").animate({
            "margin-left": $(this).css("margin-left")-$(this).find("img").width();
        });
    }
});

// HANDLE CLICK ON PREV DIV
$(".prev").click(function(){
    //SLIDE ONLY IF MARGIN-LEFT SMALLER THAN 0
        if($(".im").css("margin-left") < 0){
        // SET MARGIN-LEFT TO MARGIN-LEFT + ONE SLIDE
        $(".im").animate({
            "margin-left": $(this).css("margin-left")+$(this).find("img").width();
        });
    }
});
于 2013-07-16T07:06:00.040 に答える
0

次のようなものを試してください: http://jsfiddle.net/38pzs/

<div class="nextprev">
    <div class="next">next</div>
    <div class="prev">Prev</div>
</div>


<ul class="im"> 
   <li class="active"><img src="<?php echo $this->basePath().'/images/feat/shop/1/1_large.jpg';?>" /><a class="next1" href="#">next</a></li>
   <li><img src="<?php echo $this->basePath().'/images/feat/shop/2/2_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li>
   <li><img src="<?php echo $this->basePath().'/images/feat/shop/3/3_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li> 
   <li><img src="<?php echo $this->basePath().'/images/feat/shop/4/4_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li> 
   <li><img src="<?php echo $this->basePath().'/images/feat/shop/5/5_large.jpg';?>" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li> 
</ul>

CSS:

.im li {
    display: none;
}
.im li.active {
    display: inherit;
}

html:

$(".prev").on('click', function() {
    $('li.active:not(:first-child)').removeClass('active').prev().addClass('active');
});

$(".next").on('click', function() {
    $('li.active:not(:last-child)').removeClass('active').next().addClass('active');
});
于 2013-07-16T07:06:16.923 に答える