好资源导航 » 文章资讯 » JS实现图片幻灯片效果代码实例

JS实现图片幻灯片效果代码实例

2023-07-24 10:52:03 255

其效果是点击图片切换到下一张图片

首先准备五张图片

样式

.imgeli{
position:absolute;/*绝对定位*/
top:10px;
left:10px;
list-style-type:none;}


$(document).ready(function(){
//所有图片隐藏
$(".imgeli").hide();
//第一张图片淡入
$(".imgeli").first().fadeIn("slow");

//单击事件（当前图片淡出，下一张图片淡入）
$(".imgeli").click(function(){
varnext=$(this).next();
if($(this).index()!=$(".imgeli").length-1){
$(this).fadeOut("slow");
next.fadeIn("slow");
}elseif($(this).index()==$(".imgeli").length-1){
next=$(".imgeli").first();
$(this).fadeOut("slow");
next.fadeIn("slow");
}
returnfalse;
});
//注：最后一张图片的判断
//禁止跳转
})

其中用的是fadeIn()->淡入和fadeOut()->淡出两者效果叠加则可用fadeToggle()

fadeToggle()方法在fadeIn()->淡入和fadeOut()->淡出方法之间切换。

如果元素是淡出显示的，fadeToggle()会使用淡入效果显示它们。

如果元素是淡入显示的，fadeToggle()会使用淡出效果显示它们。

三者的语法都是:$(selector).fadeOut/fadeIn/fadeToggle(speed,easing,callback)

其中slow是speed参数("毫秒","slow","fast")

毫秒
"slow"
"fast"

easing的参数("swing","linear")

"swing"-在开头/结尾移动慢，在中间移动快
"linear"-匀速移动

callback:

可选。fadeToggle()方法执行完之后，要执行的函数。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JS实现图片幻灯片效果代码实例

热门推荐

随机推荐