源码下载地址:
链接: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的左边间距为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 - 轮播图》的更多相关文章

  1. 简单物联网:外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. VMware 三种网络配置解释

    https://blog.csdn.net/noob_f/article/details/51099040 ifconfig -a 网卡名称

  2. day32-socketserver

    #socketserver 是在socket基础上进行了封装,它让server可以实时跟多个client进行通信. #thread线程:一个程序有一个线程,一个线程是调度cpu的最小单位.程序运行才产 ...

  3. Docker系列八: 数据卷

    什么是数据卷 生成环境中使用docker的过程中,往往需要对数据进行持久化,或者需要多个容器之间进行数据共享,这个就涉及到了容器数据管理 容器中管理数据主要有两种方式: 数据卷:容器内数据之间映射到本 ...

  4. python学习笔记(17)urllib.parse模块使用

    url.parse :定义了url的标准接口,实现url的各种抽取 parse模块的使用:url的解析,合并,编码,解码 使用时需导入 from urllib import parse urlpars ...

  5. 聊聊HTTPS和SSL/TLS协议 【基础入门】

    要说清楚 HTTPS 协议的实现原理,至少需要如下几个背景知识.1. 大致了解几个基本术语(HTTPS.SSL.TLS)的含义2. 大致了解 HTTP 和 TCP 的关系(尤其是“短连接”VS“长连接 ...

  6. SMTP错误码/建议解决方法

    SMTP错误码/建议解决方法 错误总表 420 1. Timeout Communication Problem Encountered During Transmission. Thie Is a ...

  7. 对TD tree的使用体验及建议

    TDtree与QQ空间有着相似的功能,你可以在里面发表自己的感受与心情,也可以存储照片或者给喜欢的说说点赞.发表评论等,可以说这是一个将QQ空间从QQ里独立出来的软件.作为一个娱乐性的软件,它的功能还 ...

  8. Java IO: Reader和Writer

    作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) Reader 原文链接 Reader是Java IO中所有Reader的基类.Reader与Input ...

  9. [LC] 295. Find Median from Data Stream

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  10. [LC] 392. Is Subsequence

    Given a string s and a string t, check if s is subsequence of t. You may assume that there is only l ...