Home >Web Front-end >JS Tutorial >Image slide show source code based on jquery_jquery

Image slide show source code based on jquery_jquery

WBOY
WBOYOriginal
2016-05-16 17:51:561109browse
Copy code The code is as follows:

//Picture slide show
$(function() {
var imgPro = {
imgWidth : 626, //Picture width
imgConLength : 0, //Total length of picture
index : 0, //Navigation lock index
count : 0, // Number of pictures
left : 0, //Absolute positioning left
pre : -1, //Previous picture index
curr : 0, //Current picture index
next : 1, //Next Image index
direction: 1, //Auto play direction
interTime: 3000//Interval time
}
addImgAlt(imgPro.curr);
imgPro.count = $('# banner .list a img').length;
imgPro.imgConLength = imgPro.imgWidth * imgPro.count;
imgPro.left = parseInt($('#box .list ul').css("left" ));
//Play timer
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);
});
// Automatically play pictures
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 ();
}

}

//Click left direction
$('#box .arrowl img').click(function() {
if ( imgPro.curr != 0) {
toLast();
}
});
//Click the right direction
$('#box .arrowr img').click(function () {
if (imgPro.next != imgPro.count) {
toNext();
}
});
//Click the navigation to play
$('# 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;
addImgAlt(imgPro.index);
play();
$('#box .count li ').eq(imgPro.curr).removeClass('current').end().eq(imgPro.index).addClass('current');
imgPro.curr = imgPro.index;
imgPro .pre = imgPro.index - 1;
imgPro.next = imgPro.index 1;
}
});
//Play
function play() {
$( '#box .list ul').css({
'opacity' : '0.5'
}).animate({
'left' : imgPro.left "px",
'opacity ' : '1'
}, 'slow');
}

//Add picture description information
function addImgAlt(index) {
$("#box p" ).text($("#banner .list a img").eq(index).attr("alt"));
}

//Previous
function toLast( ) {
imgPro.left = imgPro.imgWidth;
addImgAlt(imgPro.pre);
play();
$('#box .count li').eq(imgPro.curr) .removeClass('current').end().eq(imgPro.pre).addClass('current');
imgPro.pre--;
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.curr ;
imgPro.next ;
}

});
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn