原生JS写轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 380px;
height: 270px;
margin: 50px auto;
background-color: #00FFFF;
padding: 5px;
position: relative;
overflow: hidden;
}
#imgList{
list-style: none;
position: absolute;
left: 0px;
}
#imgList li{
float: left;
margin: 0 10px;
}
#navDiv{
position: absolute;
bottom: 5px;
}
#navDiv a{
float: left;
background-color: #888888 ;
width: 20px;
height: 20px;
margin: 0 5px;
opacity: 0.5;
filter: alpha(opacity=50);
}
#navDiv a:hover{
background-color: #000000;
}
</style>
<!-- 引入 -->
<script type="text/javascript">
window.onload = function(){
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
imgList.style.width = 390*imgArr.length+"px";
var navDiv = document.getElementById("navDiv");
var outer = document.getElementById("outer");
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
var index = 0;
var allA = document.getElementsByTagName("a");
allA[index].style.backgroundColor = "#000000 ";
for(var i=0 ; i<allA.length ; i++){
allA[i].num = i;
allA[i].onclick = function(){
clearInterval(timer);
index = this.num
move(imgList,"left",-390*index,50,function(){
autoChange();
});
setA();
};
};
autoChange();
function setA(){
if(index >= imgArr.length-1){
index = 0;
imgList.style.left = 0;
};
for(var i=0 ; i<allA.length ; i++){
allA[i].style.backgroundColor = "";
};
allA[index].style.backgroundColor = "#000000 ";
};
var timer;
function autoChange(){
timer = setInterval(function(){
index++;
index %= imgArr.length;
move(imgList,"left",-390*index,20,function(){
setA();
});
},3000);
};
function move(obj , attr , target , speed , callback){
clearInterval(obj.timer);
var current = parseInt( getStyle(obj,attr));
if(current > target){
speed = -speed;
};
obj.timer = setInterval(function(){
var oldValue = parseInt( getStyle(obj,attr));
var newValue = oldValue + speed ;
if( speed < 0 && newValue < target || speed > 0 && newValue > target){
newValue = target;
};
obj.style[attr] = newValue + "px";
if(newValue === target){
clearInterval(obj.timer);
callback && callback();
};
},50);
};
function getStyle(obj , name){
if(window.getComputedStyle){
return getComputedStyle(obj , null)[name];
}
else{
return obj.currentStyle[name];
}
};
function addClass(obj, cn) {
if(!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
function hasClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
function removeClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
obj.className = obj.className.replace(reg, "");
}
function toggleClass(obj, cn) {
if(hasClass(obj, cn)) {
removeClass(obj, cn);
} else {
addClass(obj, cn);
}
}
};
</script>
</head>
<body>
<!-- 创建一个外部div,来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul,用来放置图片 -->
<ul id="imgList">
<li><img src="..." ></li>
<li><img src="..." ></li>
<li><img src="..." ></li>
<li><img src="..." ></li>
<li><img src="..." ></li>
<li><img src="..." ></li>
<li><img src="..." ></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>
<a href="JavaScript:;"></a>
</div>
</div>
</body>
</html>