<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: greenyellow;
/* 设置文本居中 */
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 点击按钮切换图片，就是要修改img标签道德src属性
// 获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
// 获取img标签
var img = document.getElementsByTagName("img")[0];
// 创建一个数组，用来保存图片的路径
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"]
//创建一个变量，来保存当前正在显示图片的索引
var index = 0;
// 获取id为info的p元素
var info = document.getElementById("info");
//分别为两个按钮绑定单击响应函数
prev.onclick = function () {
// alert("上一张");
// 切换到上一张，索引自减
index = (index - 1) % imgArr.length;
img.src = imgArr[index];
// 设置提示文字
info.innerHTML = "一共 " + imgArr.length + " 张图片" + "，当前第 " + (index + 1) + " 张";
}
next.onclick = function () {
// alert("下一张");
// 要修改一个元素的属性 元素.属性 = 属性值
// 切换到上一张，索引自增
index = (index + 1) % imgArr.length;
img.src = imgArr[index];
info.innerHTML = "一共 " + imgArr.length + " 张图片" + "，当前第 " + (index + 1) + " 张";
}
}
</script>
</head>
<body>
<div id="outer">
<p id="info">一共 5 张图片，当前第 1 张</p>
<img src="img/1.jpg" />
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
自动切换图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function () {
var btn01 = document.getElementById("btn01");
// 使图片可以自动切换
// 获取img标签
var img1 = document.getElementById("img1");
// 创建一个数组来保存图片的路径
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
// 创建一个变量，用来保存当前图片的索引
var index = 0;
// 定义一个变量，用来保存定时器的标识
var timer;
// 开启一个定时器，来自动切换图片
btn01.onclick = function () {
/*
目前，我们每点击一次按钮，就会开启一个定时器，
点击多次就会开启多个定时器，这就导致图片的切换速度过快，
并且我们只能关闭最后一次开启的定时器
*/
// 在开启定时器之前，需要将上一个定时器关闭
clearInterval(timer);
timer = setInterval(function () {
// 使索引自增
index++;
// 判断索引是否超过最大索引
// if (index >= imgArr.length) {
// // 则将index设置为0
// index = 0;
// }
index %= imgArr.length;
// 修改img1的src属性
img1.src = imgArr[index];
}, 1000)
}
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
// 点击按钮以后，停止图片的自动切换，关闭定时器
/*
clearInterval()可以接收任意参数，
如果参数是一个有效的定时器的标识，则停止对应的定时器
如果参数不是一个有效的标识，则什么也不做
*/
clearInterval(timer);
}
}
</script>
</head>
<body>
<img id="img1" src="img/1.jpg" />
<br /><br />
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>
轮播图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 设置outer */
#outer {
/* 设置宽和高 */
width: 520px;
height: 333px;
/* 居中 */
margin: 50px auto;
/* 设置背景颜色 */
background-color: yellowgreen;
/* 设置padding */
padding: 10px 0;
/* 开启相对定位 */
position: relative;
/* 裁剪溢出的内容 */
overflow: hidden;
}
/* 设置imgList */
#imgList {
/* 去除项目符号 */
list-style: none;
/* 设置ul的宽度 */
/* width: 2600px; */
/* 开启绝对定位 */
position: absolute;
/*
设置偏移量
每向左移动520px，就会显示到下一张图片
*/
left: 0px;
}
/* 设置图片中的li */
#imgList li {
/* 设置浮动 */
float: left;
/* 设置左右外边距 */
margin: 0 10px;
}
/* 设置导航按钮 */
#navDiv {
/*开启绝对定位*/
position: absolute;
/* 设置位置 */
bottom: 15px;
/*
设置left值
outer宽度 520
navDiv宽度 25*5 = 125
520 - 125 = 395
395/2 = 197.5
*/
/* left: 197px; */
}
#navDiv a {
/* 设置超链接浮动 */
float: left;
/* 设置超链接宽高 */
width: 15px;
height: 15px;
/* 设置超链接颜色 */
background-color: red;
/* 设置左右外边距 */
margin: 0 5px;
/* 设置透明 */
opacity: 0.5;
/* 兼容IE8透明 */
filter: alpha(opacity=50);
}
/*设置鼠标移入的效果*/
#navDiv a:hover {
background-color: black;
}
</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";
console.log(imgArr.length);
/*设置导航按钮居中*/
//获取navDiv
var navDiv = document.getElementById("navDiv");
//获取outer
var outer = document.getElementById("outer");
//设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
//默认显示图片的索引
var index = 0;
//获取所有的a
var allA = document.getElementsByTagName("a");
//设置默认选中的效果
allA[index].style.backgroundColor = "black";
/*
点击超链接切换到指定的图片
点击第一个超链接，显示第一个图片
点击第二个超链接，显示第二个图片
*/
//为所有的超链接都绑定单击响应函数
for (var i = 0; i < allA.length; i++) {
//为每一个超链接都添加一个num属性
allA[i].num = i;
allA[i].onclick = function () {
// 关闭自动切换的定时器
clearInterval(timer);
// 获取点击超链接的索引，并将其设置为index
index = this.num;
/*
切换图片
第一张 0
第二张 1 -520
第三张 2 -1040
*/
// imgList.style.left = -520 * index + "px";
setA();
// 使用move函数来切换图片
move(imgList, "left", -520 * index, 60, function () {
//动画执行完毕，开启自动切换
autoChange();
});
};
};
// 自动切换图片
autoChange();
//创建一个方法用来设置选中的a
function setA() {
// 判断当前索引是否是最后一张图片
if (index >= imgArr.length - 1) {
//则将index设置为0
index = 0;
//此时显示的最后一张图片， 而最后一张图片和第一张是一摸一样
//通过CSS将最后一张切换成第一张
imgList.style.left = 0;
};
//遍历所有a，并将它们的背景颜色设置为红色
for (var i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor = "";
}
//将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
};
// 定义一个自动切换定时器的标识
var timer;
//创建一个函数，用来开启自动切换图片
function autoChange() {
//开启一个定时器，用来定时去切换图片
timer = setInterval(function () {
//使索引自增
index++;
//判断index的值
index = index % imgArr.length;
//执行动画，切换图片
move(imgList, "left", -520 * index, 30, function () {
//修改导航按钮
setA();
});
}, 3000);
};
function move(obj, attr, target, speed, callback) {
// 关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0向800移动，则speed为正
//如果从800向0移动，则speed为负
if (current > target) {
//此时速度应为负值
speed = -speed;
}
// 开启一个定时器，用来执行动画效果
// 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function () {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
// 在旧值的基础上增加
var newValue = oldValue + speed;
// 判断newValue是否大于800
// 从800向0移动
// 向左移动时，需要判断newValue是否小于target
// 向右移动时，需要判断newValue是否大于target
if (speed < 0 && newValue < target || speed > 0 && newValue > target) {
newValue = target;
}
// 将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到800px时，使其停止执行动画
//当元素移动到0px时，使其停止执行动画
if (newValue === target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
}
/*
定义一个函数，用来获取指定元素的当前的样式
参数:
obj 要获取样式的元素
name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle( )方法
return getComputedStyle(obj, null)[name];
} else {
// IE8的方式，没有getComputedStyle( )方法
return obj.currentStyle[name];
}
}
};
</script>
</head>
<body>
<!--创建一个外部的div, 来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/1.jpg" /></li>
</ul>
<!--创建导航按钮-->
<div id="navDiv">
<a href="javascript: ;"></a>
<a href="javascript: ;"></a>
<a href="javascript: ;"></a>
<a href="javascript: ;"></a>
<a href="javascript: ;"></a>
</div>
</div>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
