1

以前に何度も使用した jquery スライダーを使用しようとしていますが、今回は機能せず、理由がわかりません。

これが HTML コードです。基本的には、スライド用の別の div を持つメインのスライダー div であり、各スライド div にはスライドのクラスがあります (とりとめなく申し訳ありませんが、「詳細な説明」なしにこれを投稿することはできません)。

<div id="slider">
<div id="slides">
    <div class="slide">
        <img src="images/portfolio/web1.jpg" alt=""/>
    </div>
    <div class="slide">
        <img src="images/portfolio/web5.jpg" alt=""/>
    </div>
</div>
    <img src="images/arrow-L.png" alt="Left" id="slider-arrow-left"/>
    <img src="images/arrow-R.png" alt="Right" id="slider-arrow-right"/>
</div>

そして CSS は、高さと幅を設定するだけです:

#slider{height: 200px; position: relative; z-index: 1;}
#slider #slides {height: 200px; width: 883px; overflow: hidden; position: absolute; top: 0px; left: 0px;}
#slider #slides .slide{height: 200px; width: 883px;}
#slider img#slider-arrow-left {position: absolute; left: -30px; top: 80px; cursor: pointer;   z-index: 999;}
#slider img#slider-arrow-right{position: absolute; right: 0px; top: 80px; cursor: pointer; z-index: 999;}

そしてJquery：

$(document).ready(function(){


    $('#slides').cycle({ 
        fx:      'scrollHorz', 
        speed:  'slow', 
        timeout: 10000, 
        pause:   1,
        prev: $('#slider-arrow-left'),
        next: $('#slider-arrow-right'),
        cssBefore:{ 
            top: 0,
            opacity: 1,
            display: 'block'
        }, 
        animOut: {  
            top: 360
        },
        before: function(curr, next, opts){
            var $curr = $(curr);
            var $next = $(next);
        },
        pause: 1,
        pager: '#slider-controls',
        pagerAnchorBuilder: function (idx, slide) {
            return '#slider-controls li:eq(' + idx + ') a';
        }
    });
});
4

1 に答える 1

3

jQuery cycle pluginを使用して例を試しました。そしてそれは問題ないようです、

$(document).ready(function(){

    $('#slides').cycle({ 
        fx:      'scrollHorz', 
        speed:  'slow', 
        timeout: 0, //prevents auto start of jquery cycle.
        pause:   1,
        prev: $('#slider-arrow-left'),
        next: $('#slider-arrow-right'),
        cssBefore:{ 
            top: 0,
            opacity: 1,
            display: 'block'
        }, 
        animOut: {  
            top: 360
        },
        before: function(curr, next, opts){
            var $curr = $(curr);
            var $next = $(next);
        },
        pause: 1,
        pager: '#slider-controls',
        pagerAnchorBuilder: function (idx, slide) {
            return '#slider-controls li:eq(' + idx + ') a';
        }
    });

});​

ここ ：

jsフィドル

それに応じて微調整できます。

于 2013-01-01T05:30:03.807 に答える