《第31天：JQuery - 轮播图》

源码下载地址：
链接：https://pan.baidu.com/s/16K9I...
提取码：0ua2

写这篇文章，当做是对自已这一天的一个总结.
写轮播图要准备的东西：三张尺寸大小一样的图片.
分为三个模块：HTML模块，CSS模块，Jquery模块

HTML模块：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JQ轮播图</title>

    <script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script> //引用本地固定的JQ库

    <link rel="stylesheet" type="text/css" href="css/broadcast.css"> //引入你写的CSS文件

    <script src="jq/broadcast.js"></script> //引入你写的JQ文件

</head>

<body>

    <div class="photo_box">

        <div class="img">

            <img src="img/1.jpg" width="1380px" class="pic"> //src为你本地的图片路径，width为你图片的宽度，class为类名

            <img src="img/2.jpg" width="1380px" class="pic">

            <img src="img/3.jpg" width="1380px" class="pic">

            <img src="img/1.jpg" width="1380px" class="pic">

        </div>

        <div>

            <div class="btn btn1">&lt;</div> //左滑右滑按钮

            <div class="btn btn2">&gt;</div>

        </div>

        <ul class="tab"> //轮播状态点

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

</body>

</html>

CSS模块

*{

    padding:0; //初始化CSS样式

    margin:0;

    list-style: none;

}

.photo_box{

    margin: 0 auto; //全有在这个盒子里的元素居中

    width: 1380px;  //设置盒子的宽度为图片的宽度

    height: 350px;  //设置盒子的高度为图片的高度

    overflow: hidden; //超出的部分隐藏

    position: relative; //定位为相对定位

    border:3px solid #000; //设置边框

}

.img{

    width: 5520px;  //设置图片加起来的总宽度

    height: 350px;  //设置为单张图片的高度

    position: absolute; //定位为绝对定位，是相对于photo_box的盒子来改变的

    left: 0px; //对于photo_box的左边间距为0

    top: 0px; //对于photo_box的上边间距为0

}

.img img{

    float: left; //图片为左浮动，变成在同一条水平线上

}

.tab{

    position: absolute; //定位为绝对定位，是相对于photo_box的盒子来改变的

    top: 320px;  //对于photo_box的上边间距为0

    left: 45%;  //对于photo_box的左边间距为0

}

.tab li{

    width: 10px; //正方形的宽度为10px

    height: 10px; //正方形的高度为10px

    border: 2px solid #ffffff; //边框的宽度为2px

    border-radius: 100%; //正方形的圆角值为100%，则正方形变为原型

    float: left; //li左浮动

    margin-right: 8px; //圆点之间相互的间距为8px

}

.btn{

    width: 50px; //正方形的宽度为50px

    height: 50px; //正方形的高度为50px

    background-color: rgba(0,0,0,0.5);     //背景颜色

    color: #ffffff;     //字体颜色

    font-size: 28px;     //字体大小

    line-height: 46px;     //行高

    text-align: center;    //居中

    position: absolute;    //绝对定位

    top: 150px;           //距离顶部的高度为150

    border-radius: 100%;  //正方形的圆角值为100%，则正方形变为原型

    cursor: pointer;      //移动到该目标时，变为手指形状

}

.btn:hover{

    background-color: #FCC35E;

}

.btn1{

    left: 150px;//对于photo_box的左边间距为150px

}

.btn2{

    right: 150px;//对于photo_box的右边间距为150px

}

.bg{

    background-color: #FCC35E;//圆点轮播点的颜色

}

JQuery模块

var i=0;     //设置一个全局的I

var Timer;   //声音一个计时器

$(function(){

    // var clone = $(".img img").first().clone(); 这是克隆第一张图片

    // $(".img").append(clone);//把克隆的图片放入图片集中

    var length = $(".pic").length; //获取图片的张数

    $(".tab li").first().addClass('bg');//开始就是第一张

    var Timer=setInterval(function(){ //设定计时器

        i++; //i存的是第几张图片

        move(); //图片滑动的方法

    },1000);

    //鼠标划入圆点

    $(".tab li").mouseenter(function() {

    var index = $(this).index(); //获取当前轮播的图片到第几张

    console.log(index);

    var i=index; //把这个第几张赋值到i

    console.log(i);

    $(".img").stop().animate({left:-i*1380},500);//通过index就可以知道要把left改为多少，这次轮播图的原理就是通过改变left来改变显示的东西

    $(this).addClass("bg").siblings().removeClass('bg'); //给相对应的圆点增加背景颜色

    /*自动轮播*/

});

    //对banner定时器的操作

    $(".photo_box").hover(function(){

        clearInterval(Timer); //一旦鼠标进入到轮播页后，清除计时器

    },function(){

        Timer=setInterval(move,2000);//离开轮播页后，重新加入定时器

    })

    /*向左按钮*/

    $(".btn1").click(function(){ //点击向左的按钮

        i--; //此时i的数量减掉1

        move();//根据i来移动

    })

    /*向右按钮*/

     $(".btn2").click(function(){//点击向右的按钮

        i++;  //此时i的数量加1

    })

    function move(){

        if(i==length){

            $(".img").css({left:0});

            i=1; //如果i的值为图片的张数，则此时i是第四张，所以它的下一张应该为i=1，即第二张图

        }

        if(i==-1){

            $(" .img").css({left:-(length-1)*1380});

            i=length-2;

        } //如果i=-1，则length为第三张图，所以是减掉2

        $(".img").stop().animate({left:-i*1380},500); //根据i来移动它的left

        if(i==length-1){

            $(".tab li").eq(0).addClass('bg').siblings().removeClass('bg'); //如果i为第四张图，则小圆点为第一个

        }else{

            $(".tab li").eq(i).addClass('bg').siblings().removeClass('bg'); //不是第四张图，则根据原本的样子，来

        }

    }

})

这是我写轮播图的一个总结与思路，供大家参考.
希望我们都在进步的路上.

巴特西

《第31天：JQuery - 轮播图》

最新文章

热门文章