《第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 安装并启动 ...
随机推荐
- MRP运算报错-清除预留
MRP运算报错-清除预留
- LeetCode No.112,113,114
No.112 HasPathSum 路径总和 题目 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节点. ...
- vs2015的密钥
最近一直提示VS要登陆,登陆完就说评估期已到,搞得很烦. VS2015 enterprise版本得密钥: HM6NR-QXX7C-DFW2Y-8B82K-WTYJV 亲测有效!!! 专业版本的 ...
- 奇点云COO刘莹应邀出席《APEC SME大数据与人工智能论坛》
10月24日-25日,由亚太经合组织(APEC).韩国中小型及初创企业管理局(the Ministry of SMEs & Startups of Korea)主办的「APEC SME 大数据 ...
- Django使用DjangoUeditor教程
文章目录 1.将下在DjangoUeditor解压2.将解压的文件夹复制到项目的根目录中,这里使用的是虚拟环境3.进入到DjangoUedior3-master文件下,执行离线安装命令 python ...
- getResource()和getResourceAsStream()以及路径问题
用JAVA获取文件,听似简单,但对于很多像我这样的新人来说,还是掌握颇浅,用起来感觉颇深,大常最经常用的,就是用JAVA的File类,如要取得c:/test.txt文件,就会这样用File file ...
- Markdown 语法手册
1. 斜体和粗体 使用 和 * 表示斜体和粗体. 示例: 这是 斜体,这是 粗体. 2. 分级标题 使用 === 表示一级标题,使用 - 表示二级标题. 示例: 1234567 这是一个一级标题=== ...
- <SCOI2008>奖励关
emmm第一道期望dp+个状压 真有趣.. #include<cstdio> #include<iostream> #include<cstring> #inclu ...
- labview的bool（布尔）按键机械属性
在学习LabVIEW(简称LV)时,布尔控件是常用的控件.布尔控件分为按钮型控件和开关型控件,LV内部并没有区分按钮型还是开关型.这两种布尔控件可以根据需要相互转换,通过配置布尔控件的机械动作属性来实 ...
- RPC 框架性能大比拼
Dubbo 是阿里巴巴公司开源的一个Java高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成. Motan 是新浪微博开源的一个Java ...