Home > Web Front-end > JS Tutorial > body text

Image slide show source code based on jquery_jquery

WBOY
Release: 2016-05-16 17:51:56
Original
1049 people have browsed it
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 ;
}

});
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!