大家好,又见面了,我是你们的朋友全栈君。
本文实例讲述了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;
});
});
// ]]>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159193.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...