<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="tools.js" type="
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="tools.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#outer {
height: 250px;
width: 400px;
margin: auto;
margin-top: 50px;
background-color: darkred;
padding: 10px;
position: relative;
overflow: hidden;
}
#img-list {
list-style: none;
/* vertical-align:bottom; */
background-color: aqua;
/* height: 300px; */
position: absolute;
left: 0;
/* bottom: -300px; */
}
#img-list li {
margin-left: 10px;
float: left;
/* position: absolute; */
}
.inner-a {
position: absolute;
bottom: 20px;
opacity: 0.5;
/* filter:alpha(opacity=50); */
filter: alpha(opacity=50);
}
a {
float: left;
width: 10px;
height: 10px;
background-color: red;
margin-left: 10px;
}
a:hover {
background-color: black;
}
</style>
<script type="text/javascript">
window.onload = function() {
var outer = document.getElementById("outer");
var img_list = document.getElementById("img-list");
var all_li = document.getElementsByTagName("li");
var inner_a = document.getElementById("inner-a");
var all_a = inner_a.children;
img_list.style.width = 410 * all_li.length + "px";
// inner_a.style.left = (parseInt(getstyle(outer,"width"))-all_a.length*20)/2 +"px";
inner_a.style.left = (outer.offsetWidth - inner_a.offsetWidth) / 2 + "px";
var index = 0;
all_a[index].style.backgroundColor = "black";
for (i = 0; i < all_a.length; i++) {
all_a[i].num = i;
all_a[i].onclick = function() {
// this.style.backgroundColor = "black";
index = this.num;
move(img_list, 20, "left", -index * 410);
setA()
}
}
autoChange()
function setA() {
if (index >=all_li.length-1) {
img_list.style.left = 0;
index = 0;
}
for (i = 0; i < all_a.length; i++) {
all_a[i].style.backgroundColor = "";
}
all_a[index].style.backgroundColor = "black";
}
function autoChange() {
setInterval(function() {
index++;
index = index % (all_li.length);
move(img_list, 30, "left", -index * 410, function() {
setA()
});
}, 3000)
}
}
</script>
</head>
<body>
<div id="outer">
<ul id="img-list">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg "></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
<li><img src="img/1.jpg"></li>
</ul>
<div class="inner-a" id="inner-a">
<a href="javascript:void(1);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(3);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(5);"></a>
</div>
</body>
</html>
-----------
引入的文件tools.js
function move(obj,speed,attr,target,fun){
clearInterval(obj.timer);
var current = parseInt(getstyle(obj,attr));
if(current>target){speed = -speed}
// else{speed = speed}
obj.timer = setInterval(function(){
var old_value = parseInt(getstyle(obj,attr))
var new_value = old_value + speed;
if((new_value>target && speed >0)|| (new_value < target && speed<0))
{
new_value = target;
clearInterval(obj.timer);
}
obj.style[attr] = new_value +"px";
if(new_value == target){
// clearInterval(obj.timer);
fun && fun()
}
},30);
};
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj,null)[attr];
}
};
