【整体构思】
这个轮播图使用的是jQuery,所以Js的整体代量比较少.
轮播图,其实思路可以很多
第一种:
通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为 1，而其他的设为0，从而实现图频轮流播放的效果。首先让一组图片绝对定位，并使其重叠，通过函数切换控制图片的透明度和定时器来触发该函数，改变不同图片的透明度。
第二种:
通过修改每一张图片的display，让其每隔一段时间将其中的某一张图片为block，而其他的设为none，从而实现图频轮流播放的效果。首先让一组图片绝对定位，并使其重叠，通过函数切换控制图片的display和定时器来触发该函数，改变不同图片的display样式。
更多的思路,留给你们展示~
HTML代码
代码语言：javascript复制<!--
*
*
* @Author: wyy
* @Date: 2018-08-20 18:20:13
* @Email: 2752154874@qq.com
* @Last Modified by: wyy
* @Last Modified time: 2018-08-21 20:06:51
*
*
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="banner">
<!-- 轮播图 -->
<ul class="bg">
<li class="current"><a href="#"><img src="./img/banner.jpg" alt="banner" width="1226" height="460"></a></li>
<li><a href="#"><img src="./img/banner2.jpg" alt="banner" width="1226" height="460"></a></li>
<li><a href="#"><img src="./img/banner3.jpg" alt="banner" width="1226" height="460"></a></li>
<li><a href="#"><img src="./img/banner4.jpg" alt="banner" width="1226" height="460"></a></li>
<li><a href="#"><img src="./img/banner5.jpg" alt="banner" width="1226" height="460"></a></li>
<li><a href="#"><img src="./img/banner6.jpg" alt="banner" width="1226" height="460"></a></li>
</ul>
<!-- 左右箭头 -->
<div class="left"></div>
<div class="right"></div>
<!-- 小圆点 -->
<div class="list">
<ul>
<li id="bg_1" class="list-btn current"></li>
<li id="bg_2" class="list-btn"></li>
<li id="bg_3" class="list-btn"></li>
<li id="bg_4" class="list-btn"></li>
<li id="bg_5" class="list-btn"></li>
<li id="bg_6" class="list-btn"></li>
</ul>
</div>
</div>
</body>
</html>CSS代码
代码语言：javascript复制/*
* @Author: wyy
* @Date: 2018-08-20 18:26:46
* @Email: 2752154874@qq.com
* @Last Modified by: wyy
* @Last Modified time: 2018-08-21 20:30:32
*/
*{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.banner {
width: 1226px;
height: 460px;
margin: 0 auto;
position: relative;
}
a {
color: #fff;
}
a:hover {
color: #FFAA07FF;
}
a:hover .second {
display: block;
}
.bg li{
list-style: none;
float: left;
display: none;
position: absolute;
}
.bg li.current{
display: block;
}
.left {
width: 40px;
height: 70px;
background: url("../img/icon-slides.png") 83px 0px;
position: absolute;
top: 42%;
}
.left:hover {
background-position: 0px 0px;
}
.right {
width: 40px;
height: 70px;
background: url("../img/icon-slides.png") 40px 0px;
position: absolute;
right: 0px;
top: 42%;
}
.right:hover {
background-position: -43px 0px;
}
.list {
width: 145px;
height: 20px;
position: absolute;
right: 30px;
bottom: 15px;
}
.list-btn {
width: 12px;
height: 12px;
list-style: none;
float: left;
background: lightgrey;
margin-left: 6px;
border-radius:6px;
cousor:pointer;
}
.list ul .current{
background: #f88535;
}JS代码
代码语言：javascript复制/*
* @Author: wyy
* @Date: 2018-08-20 18:40:26
* @Email: 2752154874@qq.com
* @Last Modified by: wyy
* @Last Modified time: 2018-08-21 20:48:06
*/
// 全局变量
var index = 0;
$(function() {
// 定时器
(function() {
setInterval(function() {
// 自动换图代码
changePic();
// 改变index值
index ;
if (index == 5) {
index = 0;
}
}, 1000)
})();
// 找到所有的图片
var pics = $(".bg li");
// 找到所有的小圆点
var lis = $(".list li");
// 提取公共的换图方法
function changePic() {
// 控制li的class实现换图
pics.eq(index).addClass("current").siblings().removeClass("current"); // 给当前的元素添加class并移除兄弟元素的class
// 控制小圆点颜色变化
lis.eq(index).addClass("current").siblings().removeClass("current");
}
// 点击小圆点换图
lis.click(function() {
// 改变index的值
index = $(this).index(); //this代表当前每一个li元素
// F12查看日志,查看索引是否正确
// console.log(index);
//调用函数
changePic();
})
// 点击左右箭头换图
$(".left").click(function() {
// 点击左侧箭头
index--;
if (index == -1) {
index = 5;
}
changePic();
})
$(".right").click(function() {
// 点击右侧箭头
index ;
if (index == 6) {
index = 0;
}
changePic();
})
})
