大家好，又见面了，我是你们的朋友全栈君。
本文实例讲述了jquery的幻灯片图片切换效果。分享给大家供大家参考。具体如下：
这是一款基于jquery的幻灯片图片切换效果代码，有缩略图和标题，可以自定义标题。
运行效果图： ——————-查看效果 下载源码——————-
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
(1)在head区域引入CSS样式：
(2)js代码：
//
$(document).ready(function(){
if ($(‘#pager a’).size() <= 1) {
$(‘#pager’).css(‘display’, ‘none’);
return;
}
var index = 0;
var selected = null;
var width = 756;
$(‘#pager a’).each(function(i){
if (i == 0) {
selected = $(this);
selected.find(‘img’).attr(‘src’, ‘images/button-
view-active.gif’);
}
$(this).click(function(){
index = i;
selected.find(‘img’).attr(‘src’, ‘images/button-
view.gif’);
selected = $(this);
selected.find(‘img’).attr(‘src’, ‘images/button-
view-active.gif’);
$(‘#images’).animate({left:-(width * i)}, 500,
‘easeOutQuad’);
return false;
});
});
$(‘#next’).click(function(){
var a = $(‘#pager a’).get(index + 1);
if (!a) a = $(‘#pager a’).get(0);
$(a).click();
return false;
});
});
// ]]>
为大家分享的jquery的幻灯片图片切换效果代码如下
幻灯片图片切换效果
//
$(document).ready(function(){
if ($(‘#pager a’).size() <= 1) {
$(‘#pager’).css(‘display’, ‘none’);
return;
}
var index = 0;
var selected = null;
var width = 756;
$(‘#pager a’).each(function(i){
if (i == 0) {
selected = $(this);
selected.find(‘img’).attr(‘src’, ‘images/button-
view-active.gif’);
}
$(this).click(function(){
index = i;
selected.find(‘img’).attr(‘src’, ‘images/button-
view.gif’);
selected = $(this);
selected.find(‘img’).attr(‘src’, ‘images/button-
view-active.gif’);
$(‘#images’).animate({left:-(width * i)}, 500,
‘easeOutQuad’);
return false;
});
});
$(‘#next’).click(function(){
var a = $(‘#pager a’).get(index + 1);
if (!a) a = $(‘#pager a’).get(0);
$(a).click();
return false;
});
});
// ]]>
height=518>
height=518>
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/159193.html原文链接：https://javaforall.net
