图片轮播淡隐淡出js代码逻辑

最新推荐文章于 2024-01-30 21:02:38 发布

miss尹先生

最新推荐文章于 2024-01-30 21:02:38 发布

阅读量372

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41699715/article/details/79229987

本文介绍了一种使用JavaScript实现图片轮播效果的方法，包括淡入淡出及鼠标悬停暂停等功能，通过设置定时器和DOM操作实现了流畅的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//图片轮播淡隐淡出
var lisize = $('.zong_demark_one_two > div').size();
var index = 0 ;

var time

$('.zong_demark').hover(function(){
    clearInterval(timer)
},function(){
    timer=setInterval(function(){
    index++;
    myplay(index);
},2000)
}).mouseout()
$('.zong_demark_ol li').hover(function(){
    index=$(this).index()
    myplay(index);
})
function myplay(that){
    if (that==lisize) {
        index=0;
    $('.zong_demark_one_two > div').eq(0).fadeIn().siblings().fadeOut();
        $('.zong_demark_ol li').eq(0).addClass('hover_clore').siblings().removeClass('hover_clore')
    }else{
        $('.zong_demark_one_two > div').eq(that).fadeIn().siblings().fadeOut();
        $('.zong_demark_ol li').eq(that).addClass('hover_clore').siblings().removeClass('hover_clore')
    }
}