《第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的左边间距为0top: 0px; //对于photo_box的上边间距为0
}
.img img{float: left; //图片为左浮动，变成在同一条水平线上
}
.tab{position: absolute; //定位为绝对定位，是相对于photo_box的盒子来改变的top: 320px;  //对于photo_box的上边间距为0left: 45%;  //对于photo_box的左边间距为0
}
.tab li{width: 10px; //正方形的宽度为10pxheight: 10px; //正方形的高度为10pxborder: 2px solid #ffffff; //边框的宽度为2pxborder-radius: 100%; //正方形的圆角值为100%，则正方形变为原型float: left; //li左浮动margin-right: 8px; //圆点之间相互的间距为8px}
.btn{width: 50px; //正方形的宽度为50pxheight: 50px; //正方形的高度为50pxbackground-color: rgba(0,0,0,0.5);     //背景颜色color: #ffffff;     //字体颜色font-size: 28px;     //字体大小line-height: 46px;     //行高text-align: center;    //居中position: absolute;    //绝对定位top: 150px;           //距离顶部的高度为150border-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; //把这个第几张赋值到iconsole.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的数量减掉1move();//根据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来移动它的leftif(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 - 轮播图》相关推荐

ComeFuture英伽学院——2020年全国大学生英语竞赛【C类初赛真题解析】(持续更新)
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
ComeFuture英伽学院——2019年全国大学生英语竞赛【C类初赛真题解析】大小作文——详细解析
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
信息学奥赛真题解析（玩具谜题）
玩具谜题(2016年信息学奥赛提高组真题) 题目描述小南有一套可爱的玩具小人, 它们各有不同的职业.有一天, 这些玩具小人把小南的眼镜藏了起来.小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的 ...
信息学奥赛之初赛第1轮讲解（01-08课）
信息学奥赛之初赛讲解 01 计算机概述系统基本结构信息学奥赛之初赛讲解 01 计算机概述系统基本结构_哔哩哔哩_bilibili 信息学奥赛之初赛讲解 02 软件系统计算机语言进制转换信息 ...
信息学奥赛一本通习题答案（五）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通习题答案（三）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通提高篇第六部分数学基础相关的真题
第1章快速幂 1875:[13NOIP提高组]转圈游戏信息学奥赛一本通(C++版)在线评测系统第2 章素数第 3 章约数第 4 章同余问题第 5 章矩阵乘法第 6 章 ...
信息学奥赛一本通题目代码（非题库）
为了完善自己学c++,很多人都去读相关文献,就比如<信息学奥赛一本通>,可又对题目无从下手,从今天开始,我将把书上的题目一一的解析下来,可以做参考,如果有错,可以告诉我,将在下次解析里重 ...
信息学奥赛一本通（C++版）刷题记录
总目录详见:https://blog.csdn.net/mrcrack/article/details/86501716 信息学奥赛一本通(C++版) 刷题记录 http://ybt.ssoier. ...
最近公共祖先三种算法详解 + 模板题建议新手收藏例题：信息学奥赛一本通祖孙询问距离
首先什么是最近公共祖先?? 如图:红色节点的祖先为红色的1, 2, 3. 绿色节点的祖先为绿色的1, 2, 3, 4. 他们的最近公共祖先即他们最先相交的地方,如在上图中黄色的点就是他们的最近公共祖先 ...

《第31天：JQuery - 轮播图》

《第31天：JQuery - 轮播图》相关推荐

最新文章

热门文章