<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/tools01.js">
</script>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#box{
width:520px;
height:333px;
background-color: yellowgreen;
/* 让div整体居中,且距上边框80px*/
margin: 80px auto;
/*设置内边距，上下可以显示出div的背景颜色*/
padding: 10px 0px ;
position:relative;
/*只显示当前div中的图片，剪裁溢出的内容*/
/*overflow:hidden;*/
}
#picList{
/*去除ul的小黑点*/
list-style: none;
/*要想移动ul中的图片，首先得设置绝对定位，并且设置其父元素div为
* 相对定位
*/
position:absolute;
/*设置定位后才能操作left、right、top、bottom
使用js代码控制*/
/*就这一个地方不对，导致内置浏览器无法显示切换图片动画*/
left:0px;
}
#picList li{
/*向左浮动：
* 让li标签可以并列成一排
需要设置ul的宽度，ul的宽度应该等于所有图片的宽度之和
* */
float:left;
/*
* 设置图片之间的边距，先左右后上下，之后要再次增加ul和div的width
* */
margin: 0px 10px;
}
#navList{
/*开启定位后才能设置位置属性*/
position: absolute;
bottom:15px;
}
#navList a{
/*要点2：超链接浮动*/
float:left;
width: 15px;
height: 15px;
background-color: red;
margin:0 5px;
opacity: 0.5;
}
#navList a:hover{
background-color: black;
}
</style>
<script type="text/javascript">
window.onload = function(){
var picList = document.getElementById("picList");
var img = document.getElementsByTagName("img");
//动态修改ul的width，解决图片数量增加减少的问题
//要点1：内联样式要加px
picList.style.width = 520 * img.length + "px";
//导航栏居中设置：（外部div的宽度-导航栏div的宽度）/2
var box = document.querySelector("div");
//要点3：box.style.backgroundColor 获取的是内联样式，如果要获取当前样式，
// 使用getComputedStyle(对象，null);
// var obj = getComputedStyle(box,null);
var navList = document.querySelector("#navList");
navList.style.left = (box.clientWidth - navList.clientWidth) / 2 + "px";
//设置默认图片
var index = 0;
var a = document.querySelectorAll("a");
// 要点4：赋值一定要加双引号
a[index].style.backgroundColor = "black";
// 点击导航栏按钮切换图片：给每个超链接绑定单击事件
for(var i=0;i<a.length;i++){
//要点5：因为响应函数中并不能获取相应的索引，所以给超链接设置一个index属性，
// 用于存放当前索引值；
a[i].num = i;
a[i].onclick = function(){
//要点8：点击导航栏之后应该先关闭自动切换,timer要设置为全局变量
clearInterval(timer);
// 要点6：之所以设置全局变量index，是为了让【导航栏点击切换】和【自动切换】
// 共用一个index，当点击导航栏按钮切换后，自动切换就从当前图片开始。
index = this.num;
//直接切换，没有动画效果
// picList.style.left = -520 * index + "px";
// 调用move切换
set();
move(picList,"left",-520*index,20,function(){
//当点击换页结束后开去自动换页
autoMove();
});
}
}
autoMove();
// 自动切换图片:
var timer;
function autoMove(){
timer = setInterval(function(){
index++;
// 使index一直循环
index %= img.length;
move(picList,"left",-520*index,20,function(){
// 要点9（偷天换日）：首尾图片一样，当自动切换到最后一张图片时，
// 因为和第一张一样，故将ul的left属性改为第一张的left值，
// 这样就在不知不觉中切换成第一张图片了
if(index == img.length - 1){
index = 0;
picList.style.left = 0;
}
set();
});
},1000);
}
// 辅助变量:存放之前播放的图片对应的按钮索引,初始值为0，一开始播放第一张图片
var preIndex = 0;
//改变选中按钮的颜色
function set(){
此处可以不用循环改变每一个按钮的样式，可以采用一个辅助变量存放之前
播放的图片对应的按钮索引，只要修改它一个即可。
//for(var i = 0;i<a.length;i++){
//要点7：设置内联样式后样式表样式就会失效，故让内联样式为空，
// 去找样式表样式，这样hover就不会失效
//a[i].style.backgroundColor = "";
//}
a[preIndex].style.backgroundColor = "";
a[index].style.backgroundColor = "black";
preIndex = index;
}
}
</script>
</head>
<body>
<div id="box">
<ul id="picList">
<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="navList">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
外部js文件jstool.js
/*
* 参数：
* -obj 要操作的目标元素
* -attr 要操作元素的属性
* -target 目标值
* -speed 速度
* -callback 回响函数
* */
function move(obj,attr,target,speed,callback){
//关闭上一个同类定时器，如果不关，每按一次按钮，将再次开启一个定时器，导致函数执行的速度加快；
clearInterval(obj.timer);
// 判断移动的方向来设置速度的正负
var current = getComputedStyle(obj,null)[attr];
current = parseInt(current);
if(current > target)
speed = -speed;
obj.timer = setInterval(function(){
// 这里不能使用上边的current，因为current不变，而元素的实际值一直在改变
var oldValue = getComputedStyle(obj,null)[attr];
// getComputedStyle()返回值中含有px，故要用parseInt()将数值分离出来
var newValue = parseInt(oldValue) + speed;
if(newValue > target && speed > 0 || newValue < target && speed <0)
newValue = target;
// 这里注意，obj.style.样式，此处的样式也是属性，故可以使用[""]访问
obj.style[attr] = newValue + "px";
if(newValue == target){
clearInterval(obj.timer);
//动画执行完毕，调用callback
callback && callback();
}
},30);
}
879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
