1

このサイトhttps://store.sap.com/sap/cpa/repository/store/sapstore/US/default.htmlにあるように、イメージ スライダーのタイマーを作成しようとしてい ます。

これは私が自分で試したものです。テキスト付きの画像はうまくスライドしますが、タイマーに問題があります。しかし、試したリンクでそのコードにコメントしたため、いくつかの問題があります。

http://codebins.com/bin/4ldqp9c/24

ここでサムネイルを作成しましたが、問題は画像とそのテキストをこのタイマーにバインドすることです。

4

1 に答える 1

0

画像の長さに基づいてliを生成しました：

for(var i = 0; i< maximages; i++){   
    var th = '<li><a href="#'+i+'"></a></li>';
    $(th).appendTo('#thumbs > ul');
}

liにクリック機能を追加します（完璧ではありませんが、実行することをお勧めします）：

$('.paging >li a').on('click', function(e){
    e.preventDefault();
    //console.log(e.target.href);
    var slide = e.target.href.split('#')[1];
    console.log(slide);
    prevIndex = slide; //set next slide to index clicked
});

親指をアニメーション化します。

$('.paging > li').eq(prevIndex-1).css('background-color', '#777777');
$('.paging > li').eq(prevIndex).css('background-color', '#FF0');

Jquery UI を使用すると、より多くの効果が得られます。

例

申し訳ありませんが、今はテストする時間があまりありませんが、これが役立つことを願っています.

于 2012-08-07T14:30:23.530 に答える