jq之实现轮播

效果图

html文件

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
   <title>轮播</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="scrollPics">

    <ul class="slider" >
        <li><img src="imgs/image1.jpg"></li>
        <li><img src="imgs/image2.jpg"></li>
        <li><img src="imgs/image3.jpg"></li>
        <li><img src="imgs/image4.jpg"></li>
        <li><img src="imgs/image5.jpg"></li>
    </ul>


    <ul class="showBtn" >
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>


<ul class="prev-next">
   <li><img src="imgs/none.png"></li>
   <li><img src="imgs/none.png"></li>
</li>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script src="script.js"></script>
</body>
</html>

css文件

*{
   margin:0;
   padding:0;
   font-size: 16px;
}

ul,li{
   list-style: none;
}
.slider{
   width:100%;
   height: 730px;
   position: relative;
   overflow: hidden;
}
.slider ul{
   width:100%;
   position: relative;
}

.slider li{
   width: 100%;
   float: left;
   overflow: hidden;
}

.slider img{
   width:100%;
}

.slider ul:after{
   content: "";
   clear: both;
}

.showBtn{
   width: 400px;
    margin: 0 auto;
   position: relative;
   text-align: center;
   font-size: 2rem;
   line-height: 3rem;
   overflow: hidden;
   margin-top: -4rem;
   opacity: 0.5;
}

.showBtn li{
    cursor: pointer;
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    background: #E6E3E3;
    /* color: #42A5EF; */
    border-radius: 25px;
    margin-left: 1rem;
}

.showBtn .on{
   background: #2BC5CE;
}

.prev-next li:nth-of-type(1){
   position: absolute;
    display: inline-block;
    top: 300px;
    left: 2rem;
   transform:rotate(90deg);
   -ms-transform:rotate(90deg);    /* IE 9 */
   -moz-transform:rotate(90deg);    /* Firefox */
   -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
   -o-transform:rotate(90deg);    /* Opera */

}

.prev-next img {
    width: 80px;
}

.prev-next li:nth-of-type(2){
   position: absolute;
    display: inline-block;
    top: 300px;
    right: 2rem;
   transform:rotate(-90deg);
   -ms-transform:rotate(-90deg);    /* IE 9 */
   -moz-transform:rotate(-90deg);    /* Firefox */
   -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
   -o-transform:rotate(-90deg);    /* Opera */

}

js代码

$(function(){

   var picWidth = $('.slider li').width(), //获取图片的宽度
        picNum = $('.slider li').length,//获取图片的数量
        index = 0,
        timer = null,//设置定时器
        showNum = $('.showBtn').find('li'), //获取显示的按钮
        prev = $('.prev-next li').eq(0), //获取前一页的按钮
        next = $('.prev-next li').eq(1); //获取下一页的按钮
   console.log( picNum);

   showNum.on('mouseover',function(){
       $(this).addClass('on').siblings().removeClass('on');
       var iNum = $(this).index(); //获取当前触发事件的按钮的下标；
       index = iNum;//把当前触发事件的下标给自动轮播的下标，就会从触发事件之后的按钮爱开始轮播了；
       $('.slider li').eq(iNum).css('display','block').siblings().css('display','none');
   });

   prev.on('click',function(){
       var prevIndex = index-1;
       if(prevIndex<0){
           prevIndex = picNum-1; //如果是第一页往前翻就回到最后一页
       }
       index = prevIndex; //把当前触发事件的下标给轮播的下标
       $('.slider li').eq(prevIndex).css('display','block').siblings().css('display','none');
       showNum.eq(prevIndex).addClass('on').siblings().removeClass('on'); //显示上一页所对应的按钮的显示
       // clearInterval(timer);

   });

   next.on('click',function(){
       var nextIndex = index+1;
       if(nextIndex>=picNum){
           nextIndex = 0; //如果是第一页往前翻就回到最后一页
       }
       index = nextIndex; //把当前触发事件的下标给轮播的下标
       $('.slider li').eq(nextIndex).css('display','block').siblings().css('display','none');
       showNum.eq(nextIndex).addClass('on').siblings().removeClass('on'); //显示上一页所对应的按钮的显示
       // clearInterval(timer);
   });

   //设置定时器，定时切换图片
    timer = setInterval(function(){
       index++;
       if(index>=picNum){
           index = 0;
       }
       $('.slider li').eq(index).css('display','block').siblings().css('display','none');
       showNum.eq(index).addClass('on').siblings().removeClass('on');
       // showNum.eq(index).trigger('mouseover');
        // showNum.eq(index).trigger('click');
    },4000);
})

posted @ 2016-04-14 16:01 Cchuying 阅读(258) 评论(0) 编辑收藏举报

Cchuying

jq之实现轮播

公告