想熟悉下js 写一个轮播图是最好的了 特别是对按钮绑定的轮播切换又理解了一次闭包 真是常用常新啊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播js</title>
</head>
<style>
*{margin:0;padding:0}
ul,li{list-style: none;}
.wraper{
margin:100px 200px;
position: relative;
}
.banner{
position: relative;
overflow: hidden;
}
.banner .lunbo{
position: relative;
overflow: hidden;
z-index: 10;
}
.lunbo li{
float: left;
display: inline
}
.btn{
position: absolute;
left: 250px;
bottom: 35px;
z-index: 10;
}
.btn li{
float: left;
width:20px;
height: 20px;
background-color: darkgray ;
margin-left: 5px;
line-height: 20px;
text-align: center;
color: white;
cursor: default;
}
.wraper .btn .active{
background-color:tomato ;
}
.prev{
position: absolute;
left: 15px;
top: 50%;
z-index: 10;
opacity: .5;
}
.next{
position: absolute;
left: 485px;
top: 50%;
z-index: 10;
opacity: .5;
}
</style>
<body>
<div class="wraper">
<div class='banner'>
<ul class="lunbo">
<li>
<a src='javaScript:;'><img src="img/1.jpg"></a>
</li>
<li>
<a src='javaScript:;'><img src="img/2.jpg"></a>
</li>
<li>
<a src='javaScript:;'><img src="img/3.jpg"></a>
</li>
</ul>
</div>
<button class="prev">上一张</button>
<button class="next">下一张</button>
<ul class='btn'>
</ul>
</div>
</div>
</body>
</html>
<script>
//文档加载完后再执行
window.onload=function(){
var imgs=document.getElementsByTagName('img');
var w=imgs[0].width;//图片的宽度
var h=imgs[0].height;
var count=0;//标记值
var timer;//定时器
//设置banner的宽高
var $banner=document.getElementsByClassName('banner')[0];
$banner.style.width=w+'px';//设置轮播图的窗口大小和图片大小相同
$banner.style.height=h+'px';
//获取图片的个数
var len=imgs.length;
//动态添加btn
var btn=document.getElementsByClassName('btn')[0]
for(var i=0;i<len;i++){
var code=document.createElement('li');
var numbers=document.createTextNode(i+1);
btn.appendChild(code);
code.appendChild(numbers)
}
/*动态播放*/
function autoPlay(){
timer=setInterval(function(){
//动态的count值
if(count<len-1){
count++
}else{
//到最后一张图时回到第一张
count=0
}
//开始播放
play()
},2000)
}
//获取轮播图的ul
var lunbo=document.getElementsByClassName('lunbo')[0];
//获取所有的按钮
var btns=btn.getElementsByTagName('li');
//给第一个按钮加上默认的样式
btns[0].className="active";
//设置轮播ul的宽度让li可以浮动
lunbo.style.width=w*len+'px';
//播放;
function play(){
//轮播图通过right值实现
lunbo.style.right=w*count+'px';
//移除当前的btn的class
for(var j=0;j<len;j++){
if(btns[j].className=="active"){
btns[j].className=""
}
}
//动态添加btn的class
btns[count].className="active";
}
//清除定时器
function stop(){
clearInterval(timer)
}
/*按钮播放*/
//上一张
var prev=document.getElementsByClassName('prev')[0];
prev.onclick=function(){
if(count>0){
count--
}else{
count=len-1
}
play()
}
//移进移出按钮 开关定时器
prev.onmouseover = stop;
prev.onmouseout = autoPlay;
//下一张
var next=document.getElementsByClassName('next')[0];
next.onclick=function(){
if(count<len-1){
count++
}else{
count=0
}
play()
}
//移进移出按钮 开关定时器
next.onmouseover = stop;
next.onmouseout = autoPlay;
/*点击按钮对应切换*/
for(var k=0;k<len;k++){
//闭包防止作用域内活动对象item的影响
(function(_i){
btns[_i].onclick = function(){
count = _i;
play()
};
})(k);
}
/*for(var k=0;k<len;k++){
add(k)
}
//通过闭包记住当前点击的k值
function add(num){
btns[num].onclick=function(){
count=num
play()
}
}*/
btn.onmouseover = stop;
btn.onmouseout = autoPlay;
//函数运行
autoPlay()
}
</script>
