新闻发布系统轮播效果

最新推荐文章于 2024-04-26 21:55:07 发布

原创最新推荐文章于 2024-04-26 21:55:07 发布 · 540 阅读

CC 4.0 BY-SA版权

第一步，实现自动轮播

var index = 0;  
var stop = false;  
function xianshi() {  
    if (stop) {  
        return;  
    }  
    if (index < 3) {  
        index++;  
    } else {  
        index = 1;  
    }  
    $(".item img").attr("src", "image/img0" + index + ".png").show();  
    $(".carousel-indicators li").removeClass();  
    $(".carousel-indicators li").eq(index - 1).addClass("active")  
            .siblings().removeClass();  
  
}

第二步，实现中间白点点击变图

$(".carousel-indicators li").click(  
                function() {  
                    stop = true;  
                    index = $(this).index() + 1;  
                    $(".carousel-indicators li").eq(index - 1).addClass(  
                            "active").siblings().removeClass();  
                    $(".item img").attr("src", "image/img0" + index + ".png")  
                            .show();  
                });  
        $(".carousel-inner").hover(function() {  
            stop = true;  
  
        }, function() {  
            stop = false;  
        });

第三步，实现悬浮停止，点击变图

var ss = setInterval(xianshi, 1500);  
$(".carousel-control").hover(function() {  
    stop = true;  
}, function() {  
    stop = false;  
});  
  
$("[data-slide='prev']").click(function() {  
    index--;  
    if (index == 0) {  
        index = 3;  
    }  
        $(".item img").attr("src", "image/img0" + index + ".png").show();  
$(".carousel-indicators li").removeClass();  
$(".carousel-indicators li").eq(index - 1).addClass("active")  
        .siblings().removeClass();  
});  
  
$("[data-slide='next']").click(function() {  
    index++;  
    if (index == 4) {  
        index = 1;  
    }  
        $(".item img").attr("src", "image/img0" + index + ".png").show();  
$(".carousel-indicators li").removeClass();  
$(".carousel-indicators li").eq(index - 1).addClass("active")  
        .siblings().removeClass();  
});

第一步，实现自动轮播