前端之家收集整理的这篇文章主要介绍了
完美JQuery图片切换效果的简单实现，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
效果如下：
css：
html：
js：
.find()
');
})
$small_photo.find("li:first").addClass("active");
//小图鼠标动作
$small_photo.find("li").bind("mouseenter",function(){
clearInterval(strTime);
if(index!=$(this).index()){
index=$(this).index();
animate(index)
}
}).bind("mouseleave",function(){
if(isauto){
start();
}
});
//大图悬停动作
$photo_view.find("li").bind("mouseenter",function(){
clearInterval(strTime);
}).bind("mouseleave",function(){
if(isauto){
start();
}
});
//
自动播放
if(isauto){
start();
}
//启动
自动播放
function start(){
strTime=setInterval(function(){
index >= _length-1 ? index=0 : index++;
animate(index);
},speed);
}
//动画
效果
function animate(_index){//console.log(_index)
$small_photo.find("li").eq(_index).addClass('active').siblings().removeClass("active");//改变小图导航样式
$photo_view.find("li").eq(_index).css("z-index",1).siblings().css("z-index",0);//控制absolute的层级
$photo_view.find("li").eq(_index).show().find("img").css({"opacity": 0}); //装大图的opacity设置为0
$photo_view.find("li").eq(_index).find("img").animate({opacity:1},300,function(){
$(this).removeAttr("style");//动画之后
删除opacity
$photo_view.find("li").eq(_index).show().siblings().hide();//
显示大图
});//展示当前
显示动画
}
}
});
以上这篇完美JQuery图片切换效果的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/jquery/47170.html
