《第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"><</div> //左滑右滑按钮
<div class="btn btn2">></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 - 轮播图》的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- springboot支付项目之日志配置
日志框架 本节主要内容: 1:常见的几种日志框架 2:Logback的使用 3:怎么配置info和error级别日志到不同文件中并且按照日期每天一个文件. 以上几个框架可以分类如下: SLF4J和Lo ...
- 对xgboost中dump_model生成的booster进行解析
xgboost原生包中有一个dump_model方法,这个方法能帮助我们看到基分类器的决策树如何选择特征进行分裂节点的,使用的基分类器有两个特点: 二叉树: 特征可以重复选择,来切分当前节点所含的数据 ...
- 1059 C语言竞赛 (20 分)
题目:1059 C语言竞赛 (20 分) C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛.既然竞赛主旨是为了好玩,颁奖规则也就制定得很滑稽: 0.冠军将赢得一份“神秘大奖”(比如很巨大的一本学生 ...
- laravel如何输出最后一条执行的SQL
\DB::connection()->enableQueryLog(); // 开启查询日志 \DB::table('xxx'); // 要查看的sql $queries = \DB::getQ ...
- smarty模板配置代码详细说明及如何注册自己的smarty函数
下面为smarty模板的配置文件,smarty配置的详细说明以及如何注册自己所需要的smarty函数 config.inc.php <?php /** * Smarty 调用 * www.daf ...
- QTP基本循环正常遍历(代码方式实现)
0 环境 系统环境:win7 1 操作(正常遍历篇) 1.1 代码前看 systemutil.Run "D:\Program Files (x86)\HP\QuickTest Profess ...
- django框架基础-django模板语言-长期维护
################## 常用的模板语言 ####################### # django的模板语言, # # 只需要记两种特殊符号: # # {{ } ...
- PXE自动部署工具
1.工具介绍1.1::本工具主要以图形界面的方式帮助使用者快速部署PXE安装Linux的基础环境环境,(如不需要可忽略相关操作)并且支持自动配置静态IP地址和为H3C设备划分VLAN. 1.2::对于 ...
- javascript常用知识汇总
javascript这个语言庞大而复杂,我用了三年多了,还是皮毛都不会.从刚开始的jquery,到后来的es6,每天都在学习,每天都在忘记. 1.禁止手机虚拟键盘弹出 在开发适配手机的页面时,出现了这 ...
- 林轩田机器学习基石笔记3—Types of Learning
上节课我们主要介绍了解决线性分类问题的一个简单的方法:PLA.PLA能够在平面中选择一条直线将样本数据完全正确分类.而对于线性不可分的情况,可以使用Pocket Algorithm来处理.本节课将主要 ...