《第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 安装并启动 ...
随机推荐
- Maven 仓库搜索服务和私服搭建
Maven 仓库搜索服务 使用maven进行日常开发的时候,一个常见问题就是如何寻找需要的依赖,我们可能只知道需要使用类库的项目名称,但是添加maven依赖要求提供确切的maven坐标,这时就可以使用 ...
- mysql字段值为null时排序问题
-- DESC 降序时候默认null值排在后面.ASC升序时默认null值排在前面,可使用 IS NULL处理 ORDER BY score desc,gmPrice IS NULL,gmPrice, ...
- 记录ionic 最小化应用时所遇的问题
ionic3与ionic4最小化插件安装不一样: ionic3安装方法: $ ionic cordova plugin add cordova-plugin-appminimize $ npm ins ...
- Seikimatsu Occult Tonneru（网络流，状态数（建不建边）不多时，可考虑直接进行枚举
http://acm.hdu.edu.cn/showproblem.php?pid=4309 总结:边可存东西时,可新建一个点x连接u.v,x再连向汇点: #include<iostream&g ...
- 多因素线性回归|adjusted R^2|膨胀系数|非线性回归|Second-order model with 1 independent variable|Interaction model with 2 independent variables|偏相关|fraction[a]|contribution
多因素线性回归 系数由最小二乘法得到 R^2;adjusted R^2:变量变多之后,r^2自然变大,但是这不是反应客观事实,所以引入了adjusted R^2 使用散点图看独立性,也可以使用软件,c ...
- vue实现动态绑定class--（三目运算符）根据span数字内容改变其样式
一.根据span数字内容改变数字本身样式(两种样式) <template> //使用三目运算符,判断当span的val是否小于0给其不同的class名 <span class=&qu ...
- StringTokenizer(字符串分隔解析类型)
java.util.StringTokenizer 功效:将字符串以定界符为界,分析为一个个的token(可理解为单词),定界符可以自己指定. 1.构造函数. 1. StringTokenizer( ...
- python Ajax的使用
转自:http://www.cnblogs.com/python-study/p/6060530.html 1.使用Ajax在后台传递参数的示例 要使用Ajax传递参数,需要使用jquery,使用jq ...
- 简单php递归无限mysql记录
<?php header('content-type:text/html;charget=gb2312'); $d=''; get_title($d,0,'='); function g ...
- java内部类基础知识
一.java内部类具体分四大类 1.成员内部类 2.静态内部类 3.局部内部类 4.匿名内部类 1.成员内部类 :作为类的成员,存在于类中 //成员内部类可以调用外部类的所有 ...