html幻灯片图片切换效果代码,jquery的幻灯片图片切换效果代码分享

本文实例讲述了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;

});

});

$('#images').wrapInner('');

$('#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;

});

});

$('#images').wrapInner('');

$('#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>