【源代码】
链接：https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码：w104
【整体构思】
这个轮播图使用的是jQuery,所以Js的整体代量比较少.
轮播图,其实思路可以很多
第一种:
通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为 1，而其他的设为0，从而实现图频轮流播放的效果。首先让一组图片绝对定位，并使其重叠，通过函数切换控制图片的透明度和定时器来触发该函数，改变不同图片的透明度。
第二种:
通过修改每一张图片的display，让其每隔一段时间将其中的某一张图片为block，而其他的设为none，从而实现图频轮流播放的效果。首先让一组图片绝对定位，并使其重叠，通过函数切换控制图片的display和定时器来触发该函数，改变不同图片的display样式。
更多的思路,留给你们展示~
HTML代码
<!--
*
*
* @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代码
/*
* @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:;
padding:;
} 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代码
/*
* @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();
})
})