jQuery响应式网站banner图片轮播特效-站长技术网

jQuery响应式网站banner图片轮播特效

时间:2019-11-15 10:29:05 来源:网络收集作者:不详点击:次

源码授权：免费特效运行环境： jQuery 源码大小： 670 KB
普通会员
点击下载

jQuery响应式网站banner图片轮播特效，自适应手机浏览，带左右按钮控制图片轮播切换，轮播时有淡出淡现过渡动画效果。

js代码
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//点击停止轮播
$("#stop").click(function(){
    clearInterval(time);
    console.log("dsda");
})
//用于判断导航栏的状态
var toggle = true;
var time=null;
var nexImg = 0;
var bannerHeight = $(".c-banner ul li img").eq(0).css("height");
var imgLength = $(".c-banner .banner ul li").length;
$(".c-banner").css("height",bannerHeight);
$(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
//导航栏最后一个li的边框去除
$(".c-nav ul li:last").css("border","none");
//导航栏按钮
$('.btnImg').click(function() {
    if (toggle) {
        $('.btnImg').css("border", "1px solid #b0ccf3");
        toggle = false
    } else {
        $('.btnImg').css("border", "1px solid transparent");
        toggle = true;
    }
    $(".show").slideToggle(300);
})
//窗口大小发生改变
$(window).resize(function() {
    //获取窗口宽度
    var windSize = $(window).width();
    if (windSize > 576) {
        $(".show").slideDown(0);
    } else {
        $(".show").slideUp(0);
    }
    var bannerHeight = $(".c-banner ul li[style*='block'] img").css("height");
    $(".c-banner").css("height",bannerHeight);
});
$(document).ready(function(){
    //定时器
    time =setInterval(intervalImg,3000);
});
//点击上一张
$(".preImg").click(function(){
    clearInterval(time);
    nexImg = nexImg-1;
    if(nexImg<0){
        nexImg=imgLength-1;
    }
    $(".c-banner .jumpBtn ul li").css("background-color","white");
    $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
    $(".c-banner .banner ul li").eq(nexImg).css("display","block");
    $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
    $(".c-banner .banner ul li").eq(nexImg+1).stop().animate({"opacity":0},1000,function(){
        $(".c-banner ul li").eq(nexImg+1).css("display","none");
    });
    time =setInterval(intervalImg,3000);
})
//点击下一张
$(".nexImg").click(function(){
    clearInterval(time);
    intervalImg();
    time =setInterval(intervalImg,3000);
})
//轮播图
function intervalImg(){
    if(nexImg<imgLength-1){
        nexImg++;
    }else{
        nexImg=0;
    }

    $(".c-banner .banner ul li").eq(nexImg).css("display","block");
    $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
    $(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){
        $(".c-banner .banner ul li").eq(nexImg-1).css("display","none");
    });
    $(".c-banner .jumpBtn ul li").css("background-color","white");
    $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
}
//轮播图底下按钮
$(".c-banner .jumpBtn ul li").each(function(){
    $(this).click(function(){
        clearInterval(time);
        $(".c-banner .jumpBtn ul li").css("background-color","white");
        jumpImg = $(this).attr("jumpImg");
        if(jumpImg!=nexImg){
            var after =$(".c-banner .banner ul li").eq(jumpImg);
            var befor =$(".c-banner .banner ul li").eq(nexImg);
            nexImg=jumpImg;
            after.css("display","block");
            after.stop().animate({"opacity":1},1000);
            befor.stop().animate({"opacity":0},1000,function(){
                befor.css("display","none");
            });
        }
        $(this).css("background-color","black");
        time =setInterval(intervalImg,3000);
    });
});
</script>