javascript实现轮播器的代码教程
程序员文章站
2023-11-21 16:20:34
javascript实现轮播器的代码教程
javascript实现轮播器的代码教程
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>js实现轮播器</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box1{
background-color: red;
margin:40px auto;
padding:10px 0;
width:490px;
height:760px;
position: relative;
overflow: hidden;
}
#lunboqi{
list-style:none;
position: absolute;
left:0px;
}
#box1 #lunboqi li{
margin:0 10px;
float:left;
}
#box1 #lunboqi li img{
width:470px;
height:760px;
}
#aarr{
position: absolute;
bottom: 20px;
}
#aarr a{
float:left;
width:20px;
height:20px;
border-radius: 10px;
background-color: red;
opacity:0.4;
margin:0 5px;
}
#aarr a:hover{
opacity:1;
}
</style>
<script type="text/javascript">
window.onload=function(){
var lunboqi = document.getelementbyid("lunboqi");
var lis = lunboqi.getelementsbytagname("img");
//调整ul的总大小，使其能够存放所有的li
lunboqi.style.width = lis.length * 490 + "px";
var box1 = document.getelementbyid("box1");
var aarr = document.getelementbyid("aarr");
var as = aarr.getelementsbytagname("a");
//使超链接组居中显示
aarr.style.left = (box1.offsetwidth - as.length*30)/2 + "px";
//图片的索引
var index = 0;
//调整默认索引的颜色
as[index].style.opacity = 1;
//自动切换的定时器标识
var timer;
autochange();
//为每个超链接绑定单机响应函数
for(var i=0;i<as.length;++i){
as[i].num = i;
as[i].onclick = function(){
//点击时关闭自动切换功能
clearinterval(timer);
index = this.num;
seta();
animate(lunboqi,"left",-490*index,50,function(){
//执行完毕后执行
//开始自动切换
autochange();
});
};
}
//自动切换图片
function autochange(){
timer = setinterval(function(){
index = (++index) % lis.length;
animate(lunboqi,"left",-490*index,40,function(){
seta();
});
},2000);
}
//设置超链接的样式
function seta(){
if(index >= lis.length - 1){
index = 0;
lunboqi.style.left = 0 + "px";
}
//a全部设置为初始值
for(var i=0;i<as.length;++i){
as[i].style.opacity = "";
}
//设置当前索引指定的a的样式
as[index].style.opacity = 1;
}
//实现动画过程的函数
function animate(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函数
callback && callback();
}
},50);
}
//获取obj对象的name属性
function getstyle(obj,name){
if(window.getcomputedstyle){
return getcomputedstyle(obj,null)[name];
}else{
//兼容ie8
return obj.currentstyle[name];
}
}
};
</script>
</head>
<body>
<p id="box1">
<ul id="lunboqi">
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
<li><img src="5.jpg" alt="" /></li>
<!-- 非常巧妙的实现了轮播器的自然切换 -->
<li><img src="1.jpg" alt="" /></li>
</ul>
<p id="aarr">
<a href="javascript：;"></a>
<a href="javascript：;"></a>
<a href="javascript：;"></a>
<a href="javascript：;"></a>
<a href="javascript：;"></a>
</p>
</p>
</body>
</html>