《第31天：JQuery - 轮播图》

fuyi501 发布于2019-08-02 11:48 / 1469人阅读

摘要：源码下载地址链接提取码写这篇文章，当做是对自已这一天的一个总结写轮播图要准备的东西三张尺寸大小一样的图片分为三个模块模块，模块，模块模块轮播图引用本地固定的库引入你写的文件引入你写的文件为你本地的图片路径，为你图片的宽度，为类名左滑右滑

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

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

HTML模块：




    
    JQ轮播图
     //引用本地固定的JQ库
     //引入你写的CSS文件
     //引入你写的JQ文件


    
        
             //src为你本地的图片路径，width为你图片的宽度，class为类名
            
            
            
        
        
            < //左滑右滑按钮
            >
        
         //轮播状态点

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"); //不是第四张图，则根据原本的样子，来
        }
    }
})

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

混合云超融合服务器轮播图写轮播图将轮播图 php轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53129.html

《第31天：JQuery - 轮播图》

摘要：源码下载地址链接提取码写这篇文章，当做是对自已这一天的一个总结写轮播图要准备的东西三张尺寸大小一样的图片分为三个模块模块，模块，模块模块轮播图引用本地固定的库引入你写的文件引入你写的文件为你本地的图片路径，为你图片的宽度，为类名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源码下载地址：链接：https...

RiverLi 2019-08-23 12:29 评论0 收藏0
小白成长日记：一步一步写个轮播图插件

摘要：并不是所有人写的代码或者插件都适合小白使用，比如这是一个的滚动插件，大多数人使用了之后发现滚动不了，去作者提，其实是他们并不懂滚动的原理。最近在这里看了一篇关于面试的文章《回顾自己三次失败的面试经历》，作者三次倒在了轮播图上。囧，所以我也写个轮播图看看。这次是用jQuery写的，因为最近一直在研究jQuery插件的写法，所以用jQuery写的，而且我发现，我vue用太多，完全不熟悉d...

notebin 2019-08-22 11:15 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

DC_er 2019-08-21 17:42 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

Hwg 2019-08-05 12:25 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

spacewander 2019-08-29 13:50 评论0 收藏0