仿京东轮播图小案例

仿电商平台做的小案例，欢迎批评指正！记得换图片，引入jQuery插件。

布局：

       

           

               

           

           

                距离20191209还有

           

           

               

                    1

                    2

                    3

               

           

       

       

           

               

•                    

                         

                         

  笑的像花一样

                     

                     

                         

                         

  笑的像花一样

                     

                     

                         

                         

  笑的像花一样

                     

                     

                         

                         

  笑的像花一样

                     

                 

               

•                    

                         

                         

  神仙眷侣

                     

                     

                         

                         

  神仙眷侣

                     

                     

                         

                         

  神仙眷侣

                     

                     

                         

                         

  神仙眷侣

                     

                 

               

•                    

                         

                         

  笑的像花一样

                     

                     

                         

                         

  笑的像花一样

                     

                     

                         

                         

  笑的像花一样

                     

                     

                         

                         

  笑的像花一样

                     

                 

               

•                    

                         

                         

  神仙眷侣

                     

                     

                         

                         

  神仙眷侣

                     

                     

                         

                         

  神仙眷侣

                     

                     

                         

                         

  神仙眷侣

                     

                 

               

•                    

                         

                         

  笑的像花一样

                     

                     

                         

                         

  笑的像花一样

                     

                     

                         

                         

  笑的像花一样

                     

                     

                         

                         

  笑的像花一样

                     

                 

           

           

                <

           

           

                >

           

       

       

           

               

•                    

                 

               

•                    

                 

               

•                    

                 

               

•                    

                 

               

•                    

                 

           

           

               

               

               

               

               

           

       

   

样式：

html,body,p,ul,li,ol{

    margin: 0;

    padding: 0;

    list-style: none;

}

#box{

    width: 1200px;

    height: 300px;

    position: relative;

    margin: 50px auto;

}

/* 左 */

#box>#l{

    width: 20%;

    height: 100%;

    position: relative;

    background: red;

    float: left;

}

#box>#l>#l_t{

    width: 240px;

    height: 200px;

}

#box>#l>#l_t>img{

    width: 100%;

    height: 100%;

}

#box>#l>#l_m{

    width: 240px;

    height: 50px;

    color: #ffffff;

    line-height: 50px;

    text-align: center;

    font-size: 20px;

}

#box>#l>#l_b{

    width: 240px;

    height: 50px;

    line-height: 50px;

    text-align: center;

}

#box>#l>#l_b>p{

    padding:  0 30px;

}

#box>#l>#l_b>p>span{

    width: 40px;

    height: 40px;

    display: block;

    background: gray;

    float: left;

    line-height: 40px;

    margin-left: 10px;

    color: #ffffff;

    font-size: 20px;

}

/* 中 */

#box>#c{

    width: 60%;

    height: 100%;

    position: relative;

    background: blue;

    float: left;

    overflow: hidden;

}

#box>#c>ul{

    width: 36000px;

    height: 300px;

    position: absolute;

}

#box>#c>ul>li{

    width: 720px;

    float: left;

}

#box>#c>ul>li>div{

    width: 180px;

    height: 300px;

    float: left;

}

#box>#c>ul>li>div>img{

    width: 175px;

    height: 200px;

    padding-top: 16px;

    padding-left: 3px;

}

#box>#c>ul>li>div>p{

    text-align: center;

    width: 100%;

    height: 50px;

    line-height: 50px;

    color: #ffffff;

    font-size: 20px;

}

#box>#c>.c_l{

    width: 50px;

    height: 50px;

    position: absolute;

    background: black;

    opacity: 0.8;

    z-index: 2;

    top: 50%;

    left: 0;

    color: #ffffff;

    font-size: 20px;

    line-height: 50px;

    text-align: center;

}

#box>#c>.c_r{

    width: 50px;

    height: 50px;

    position: absolute;

    background: black;

    opacity: 0.8;

    z-index: 2;

    top: 50%;

    right: 0;

    color: #ffffff;

    font-size: 20px;

    line-height: 50px;

    text-align: center;

}

/* 右 */

#box>#r{

    width: 20%;

    height: 100%;

    position: relative;

    float: left;

    overflow: hidden;

}

#box>#r>ul{

    width: 1200px;

    height: 100%;

    position: absolute;

}

#box>#r>ul>li{

    width: 240px;

    height: 100%;

    float: left;

}

#box>#r>ul>li>img{

    width: 240px;

    height: 100%;

}

#box>#r>ol{

    width: 100%;

    height: 50px;

    line-height: 50px;

    position: absolute;

    left: 30px;

    top: 85%;

}

#box>#r>ol>li{

    width: 25px;

    height: 25px;

    background: #ffffff;

    float: left;

    border-radius: 50%;

    margin-left: 10px;

}

#box>#r>ol>li.dk{

    background: red;

}

js逻辑代码：

// 倒计时

function djs(){

    var n = new Date('2019-12-09 00:00:00');

    var o = new Date();

    var dif = n - o;

    //时

    var hour = parseInt(dif/1000/60/60);

//分

    var min = parseInt((dif/1000/60)%60);

//秒

    var sec = parseInt((dif/1000)%60%60);

    $('#l_b>p>span').eq(0).html(hour)

    $('#l_b>p>span').eq(1).html(min)

    $('#l_b>p>span').eq(2).html(sec)

}

djs();

var time = setInterval(djs,1000);

// 左切换

var index = 0;

$('.c_l').click(function(){

    index++;

    if(index > 4){

        index = 0;

    }

    $("#c>ul").animate({ left: -720 * index + "px" }, 800);

})

// 右切换

$('.c_r').click(function(){

    index--;

    if(index < 0){

        index = 4;

    }

    $("#c>ul").animate({ left: -720 * index + "px" }, 800);

})

// 点击小圆点

$('#r>ol>li').click(function(){

    var ind = $(this).index();

  $(this)

    .addClass("dk")

    .siblings()

    .removeClass("dk");

  $("#r>ul>li")

    .eq(ind)

    .show()

    .siblings()

    .hide();

})

//自动轮播功能

var tim = setInterval(auto,2000);

function auto(){

    var ind = $('.dk').index();

    ind++;

    if(ind > 4){

        ind = 0;

    }

    $("#r>ul>li").eq(ind).fadeIn().siblings().fadeOut();

$("#r>ol>li").eq(ind).addClass("dk").siblings().removeClass("dk");

}

//右边轮播图鼠标滑过，轮播图停止。

$('#r').hover(function(){

    clearInterval(tim);

},function(){

    tim = setInterval(auto,2000);

})