《第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'); //不是第四张图，则根据原本的样子，来
}
}
})这是我写轮播图的一个总结与思路，供大家参考.
希望我们都在进步的路上.