ホームページ > ウェブフロントエンド > jsチュートリアル > jquery_jquery に基づく画像スライド ショーのソース コード

jquery_jquery に基づく画像スライド ショーのソース コード

WBOY
リリース: 2016-05-16 17:51:56
オリジナル
1126 人が閲覧しました
コードをコピー コードは次のとおりです:

//画像スライド ショー
$(function( ) {
var imgPro = {
imgWidth : 626, //画像幅
imgConLength : 0, //画像の全長
index : 0, //ナビゲーション ロック インデックス
count : 0, // 画像の数
left : 0, // 左の絶対位置
pre : -1, // 前の画像インデックス
curr : 0, // 現在の画像インデックス
next : 1 , //次の画像インデックス
方向: 1, //自動再生方向
interTime: 3000//インターバル時間
}
addImgAlt(imgPro.curr)
imgPro.count = $ ('# バナー .list a img').length;
imgPro.imgConLength = imgPro.imgWidth * imgPro.count;
imgPro.left = parseInt($('#box .list ul') "left" ));
//再生タイマー
var t = setInterval(imgPlay, imgPro.interTime);
$('#box .arrowl img, #box .arrowr img,#banner .list a, #box .count li,#box p').hover(function() {
clearInterval(t);
}, function() {
t = setInterval(imgPlay, imgPro.interTime) ;
});
// 画像を自動的に再生します
function imgPlay() {
if ((imgPro.next != imgPro.count && imgPro.direction == 1) || (imgPro. pre = = -1 && imgPro.direction == -1)) {
imgPro.direction = 1;
toNext();
} else {
imgPro.direction = -1; >toLast();
}

}

//左方向にクリック
$('#box .arrowl img').click(function() {
if ( imgPro.curr != 0) {
toLast();
}
});
//右方向をクリック
$('#box .arrowr img') click(function () {
if (imgPro.next != imgPro.count) {
toNext();
}
}); ナビゲーションをクリックして再生します
$('# box .count li').click(function() {
imgPro.index = $('#box .count li').index(this);
if (imgPro.curr ! = imgPro.index) {
imgPro.left = (imgPro.curr - imgPro.index) * imgPro.imgWidth;
play(); #box .count li ').eq(imgPro.curr).removeClass('current').end().eq(imgPro.index).addClass('current');
imgPro.curr = imgPro.index ;
imgPro .pre = imgPro.index - 1;
}
});
//Play
関数
$( '#box .list ul').css({
'opacity' : '0.5'
}).animate({
'left' : imgPro.left "px",
'opacity ' : '1'
}, 'slow');
}

//画像の説明情報を追加
function addImgAlt(index) {
$( "#box p" ).text($("#banner .list a img").eq(index).attr("alt"));
}

//前
function toLast( ) {
imgPro.left = imgPro.imgWidth;
addImgAlt(imgPro.pre);
$('#box .count li'); .curr) .removeClass('current').end().eq(imgPro.pre).addClass('current');
imgPro.curr--; imgPro.next --;

//Next
function toNext() {
imgPro.left -= imgPro.imgWidth;
addImgAlt(imgPro.next); 🎜 >play();
$('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.next).addClass('current' ) ;
imgPro.pre ;
imgPro.next>}

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート