轮播图制作

在写轮播图之前我们先看看这个轮播图完成后的样式是怎样的

素材图片 ：

代码

HTML代码

    
    
    
    
    


    

        

            

            

            

            

            

        
        

            

                

                

                

                

                

            
            

                

                    
山河
一个人
我眺望远方
                
                

                    
夕阳
平静的湖水
美丽不可方物
                
                

                    
沙漠
广袤
一往无前
                
                

                    
温泉
游客
魂牵梦绕
                
                

                    
大海
一棵树
紫气东来
                
            
        
    
    
    

CSS代码

*{
    padding: 0;
    margin: 0;
}
body{
    background: #000;
}
.banner{
    margin-left: 15%;
    width: 70%;
    position: relative;
}
.src{
    max-width: 100%;
}
.banner-img{
    list-style: none;
}
.banner-body{
    width: 100%;
    position: absolute;
    bottom: 0;
    background: #fff;
}
.banner-img>li{
    display: none;
}
.banner-img>.show{
    display: block;
    animation: opcaty 2s;
}
@keyframes opcaty {
    from{
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}
.banner-body-img{
    margin: 5px;
    max-width: 60%;
    list-style: none;
}
.banner-body-img>li{
    display: inline-block;
    max-width: 18%;
}
.banner-body-img>.active{
    border-bottom: 2px solid #000;
    animation: left 2s;
}
@keyframes left {
    from{
        width : 0;
    }
    to{
        width: 100%
    }
}
.banner-text{
    width: 25%;
    position: absolute;
    bottom: 0;
    left: 70%;
    background: #493e56;
    color: #fff;
}
.banner-text>div{
    overflow:auto;
    width: 100%;
    margin: 10px;
    display: none;
}
.banner-text>.text-active{
    display: block;
}
.banner-text>div>p{
    margin: 10px 0px;
}

JS代码

// 构建索引值
var currIndex = 0;
// 初始化点击事件
initClick();
function initClick() {
    $(".banner-img li").hover(function () {
        $(".banner-body").stop().slideUp();
        clearInterval(timer);
    },function () {
        timer = setInterval("banner()",3000);
        $(".banner-body").stop().slideDown();
    })
    $('#bannerUl li').click(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        $(".banner-img li").eq($(this).index()).addClass("show");
        $(".banner-img li").eq($(this).index()).siblings().removeClass("show");
        $(".banner-text div").eq($(this).index()).addClass("text-active");
        $(".banner-text div").eq($(this).index()).siblings().removeClass("text-active");
        currIndex = $(this).index();
        clearInterval(timer);
        timer = setInterval("banner()",3000);
    });
}
//构建定时器
var timer = setInterval("banner()",3000);
function banner() {
    if (currIndex > 3) {
        currIndex = 0;
    } else {
        currIndex ++;
    }
    $(".banner-img li").eq(currIndex).addClass("show");
    $(".banner-img li").eq(currIndex).siblings().removeClass("show");
    $("#bannerUl li").eq(currIndex).addClass("active");
    $("#bannerUl li").eq(currIndex).siblings().removeClass("active");
    $(".banner-text div").eq(currIndex).addClass("text-active");
    $(".banner-text div").eq(currIndex).siblings().removeClass("text-active");
}

如上。