JavaScript制作网页中的轮播图(带有过渡效果)源码解析
注：本练习主要以效果图和源码解析的方式介绍，如有疑问可参考尚硅谷李立超老师的JS基础教程(https://www.bilibili.com/video/BV1YW411T7GX?p=136);
效果图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210413203106801.gif
源码解析：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图2title>
<style>
*{
margin: 0px;
padding: 0px;
}
#outer{
width: 520px;
height: 333px;
background-color: wheat;
/* 居中 */
margin: 20px auto;
padding: 10px 0;
position: relative;
overflow: hidden;
}
#imgList{
list-style: none;
/* width: 2600px; */
position: absolute;
}
#imgList li{
/* 设置浮动 */
float: left;
/* 设置外面距 */
margin: 0px 10px;
}
#navDiv{
/* width: 125px; */
/* height: 20px; */
/* background-color: red; */
position: absolute;
z-index: 1;
}
#navDiv a{
box-sizing: border-box;
display: inline-block;
width: 15px;
height: 15px;
margin-left: 5px;
border: 2px solid transparent;
border-radius: 8px;
background-color: rgba(60, 150, 180, 0.7);
}
/* 设置鼠标移入的效果 */
#navDiv a:hover{
background-color: rgba(70, 255, 255, .7);
}
style>
<script type="text/javascript">
window.onload = function(){
// 获取imgList
var imgList = document.getElementById("imgList");
// 获取img
var imgArr = document.getElementsByTagName("img");
// 设置imgList的宽度
imgList.style.width = 520 * imgArr.length + "px";
// imgList.style.left = "-520px";
//设置导航按钮居中
//获取navDiv
var navDiv = document.getElementById("navDiv");
//获取outer
var outer = document.getElementById("outer");
//设置导航按钮的位置
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
navDiv.style.top = outer.offsetHeight - 40 + "px";
//设置导航按钮的样式
var index = 0;
var allA = document.getElementsByTagName("a");
allA[index].style.backgroundColor = "rgba(80, 255, 255, .7)";
// 点击超链接切换到指定的图片
// 为所有的超链接都绑定单击响应函数
for(var i=0; i<allA.length; i++){
//为每一个超链接都添加一个num属性
allA[i].num = i;
//为超链接绑定单击响应函数
allA[i].onclick = function(){
//关闭自动切换的定时器
clearInterval(tmr);
//获取点击的超链接的索引，并将其设置为index
index = this.num;
//切换图片
// imgList.style.left = index * (-520) +"px";
//修改正在选中的导航按钮的背景颜色
setA();
//使用move来切换图片
move(imgList, "left", -520*index, 20, function(){
autoChange();
});
};
}
//开启自动切换图片
autoChange();
//创建一个方法用来设置选中的a
function setA(){
if(index == imgArr.length - 1){
index = 0;
//此时显示的最后一张图片，而最后一张图片和
//通过CSS将最后一张切换成第一张
imgList.style.left = 0;
}
//遍历所有a，并将他们的背景颜色设置为初始色
for(var i=0; i<allA.length; i++){
//此时不能设置背景颜色为默认颜色，因为如果设置了则会覆盖内联样式导致a元素的hover失效
allA[i].style.backgroundColor = "";
}
//设置被选中的按钮的颜色
allA[index].style.backgroundColor = "rgba(80, 255, 255, .7)";
}
//定义一个自动切换的定时器的标识
var tmr;
//创建一个函数，用来开启自动切换图片
function autoChange(){
//开启一个定时器，用来定时去切换图片
tmr = setInterval(function(){
//使索引自增
index++;
//判断index的值
index %= imgArr.length;
//执行动画，切换图片
move(imgList , "left" , -520*index , 20 , function(){
//修改导航按钮
setA();
});
console.log(index);
},1000);
}
};
//图形移动效果的方法，该方法也可在其他练习中使用
function move(obj, st, target, speed, callback){
clearInterval(obj.timer);
var current = parseInt(getStyle(obj, st));
if (current > target){
speed = -speed;
}
obj.timer = setInterval(function(){
var oldValue = parseInt(getStyle(obj, st));
var newValue = oldValue + speed;
// console.log(newValue);
obj.style[st] = newValue + "px";
if((speed > 0 || newValue <= target) && (speed < 0 || newValue >= target)){
obj.style[st] = target + "px";
clearInterval(obj.timer);
callback && callback();
}
},10);
}
//获取元素属性值的方法
function getStyle(obj, st){
if(window.getComputedStyle){
//标准浏览器获取属性值的方法
return getComputedStyle(obj, null)[st];
}else{
//IE8获取属性值的方法
return obj.currentStyle[st];
}
}
script>
head>
<body>
<div id="outer">
<div id="navDiv">
<a href="javascript:;">a>
<a href="javascript:;">a>
<a href="javascript:;">a>
<a href="javascript:;">a>
<a href="javascript:;">a>
div>
<ul id="imgList">
<li>
<img src="../02DOM/img/1.jpg" alt="">
li>
<li>
<img src="../02DOM/img/2.jpg" alt="">
li>
<li>
<img src="../02DOM/img/3.jpg" alt="">
li>
<li>
<img src="../02DOM/img/4.jpg" alt="">
li>
<li>
<img src="../02DOM/img/5.jpg" alt="">
li>
<li>
<img src="../02DOM/img/1.jpg" alt="">
li>
<ul>
div>
body>
html>