显现简单轮廓图自动切换图片，和点击切换图片
详细代码如下：
<!DOCTYPE html>
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 288px;
height: 193px;
/* 居中 */
margin: 50px auto;
/* 设置背景颜色 */
background-color: yellowgreen;
padding: 10px 0;
/* 给父元素开启相对定位 */
position: relative;
/* 裁剪溢出的内容 */
overflow: hidden;
}
#imglist {
/* 去除列表符号 */
list-style: none;
/* 设置ul宽度 */
width: 1500px;
/* 开启绝对定位 */
position: absolute;
left: 0;
}
/* 设置图片的li */
#imglist li {
float: left;
/* 设置左右外边距 */
padding: 0 10px;
}
/* 设置导航按钮 */
#navDiv {
/* 开启绝对定位 */
position: absolute;
/* 设置位置 */
bottom: 15px;
/* 设置left的值
outer：288
navDiv:25*5=125
288-125=163/2=81.5
*/
/* left: 81.5px; */
}
#navDiv a {
width: 15px;
height: 15px;
background-color: red;
float: left;
/* 左右外边距 */
margin: 0 5px;
/* 设置透明 */
opacity: 0.5;
/* 兼容ie8透明 */
filter: alpha(opacity=50);
}
/* 设置鼠标移入导航的样式 */
#navDiv a:hover {
background-color: black;
}
</style>
<!-- 调用外部tools.js代码 -->
<script type="text/javascript" src="tools.js"></script>
<script>
window.onload = function () {
//设置imglist的宽度
//获取imglist
var imglist = document.getElementById("imglist");
//获取页面所有的img标签
var imgArr = document.getElementsByTagName("img");
//设置imglist的宽度
imglist.style.width = 500 * imgArr.length + "px";
//设置导航按钮居中
var navDiv = document.getElementById("navDiv");
var outer = document.getElementById("outer");
//设置导航栏navDiv的值
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(time);
//获取点击超链接的索引
index = this.num;
//切换图片
/*
第一张 索引0 left=0
第二张 索引1 left=-288
第三章 2 -576
*/
//设置选中的a
//imglist.style.left = -288 * index + "px";
//使用动画move来切换图片
move(imglist, 20, -288 * index, "left", function () {
autoChange();
});
//修改正在选中导航栏的a
//allA[index].style.backgroundColor = "black";
setA();
};
}
//自动切换图片
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 time;
//创建一个函数，来开启自动切换图片
function autoChange() {
//开启一个定时器，用来定时切换图片
time = setInterval(function () {
//是索引自增
index++;
//index不能逐渐增加，需要判断index的值
index %= imgArr.length;
//执行动画，切换图片
move(imglist, 20, -288 * index, "left", function () {
//修改导航按钮，变成黑色
setA();
});
}, 3000);
}
};
</script>
</head>
<body>
<div id="outer">
<ul id="imglist">
<li>
<img src="images/a.jpg" alt="">
</li>
<li>
<img src="images/b.jpg" alt="">
</li>
<li>
<img src="images/c.jpg" alt="">
</li>
<li>
<img src="images/d.jpg" alt="">
</li>
<li>
<img src="images/e.jpg" alt="">
</li>
<li>
<img src="images/a.jpg" alt="">
</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>tools.js
/*
定义一个函数，用来获取指定元素的当前的样式
参数： obj：要获取样式的元素
name：要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {//正常浏览器有getComputedStyle这个方法，ie8以上有
return getComputedStyle(obj, null)[name];//正常浏览器
} else {
return obj.currentStyle[name];//IE浏览器
}
}
//创建一个可以简单执行动画的函数，当在调用的时候就不用像第一个（点击按钮box1向右移动）一样写那么多代码
/*
参数：
obj:要执行动画的对象
speed：要传进来的速度(正值向右移动，负值向左移动)
target：执行动画的目标位置
attr：要执行动画的样式,比如left top width height
callback：回调函数，这个函数会在动画执行完毕以后执行
*/
function move(obj, speed, target, attr, callback) {
//关闭上一个定时器
clearInterval(obj.time);
//获取元素当前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度正负值0-800speed为正，800-0speed为负
if (current > target) {
//此时速度为负值
speed = -speed;
}
//开启一个定时器
//向执行动画的对象中添加一个time属性，用来保存自己的定时器标识
obj.time = setInterval(function () {
//获取box1原来的值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值得基础上增加
var newValue = oldValue + speed;
//800向0移动，向左移动，需要判断newValue是否小于target speed负值newValue<target时，比如target=0，小于0让他等于0
//0到800移动，向右移动，需要判断newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置为box1,[attr]是一个变量不能用.attr
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行移动
if (newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.time);
//动画执行完毕，调用回调函数
callback && callback();//如果传了回调函数就执行，没有就不执行
}
}, 30);
}
结果：
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
