标签：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>carouse</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div id="banner"> <ul class="lunbotu clearfix"> <li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li> <li><img src="images/3.jpg"/></li> <li><img src="images/4.jpg"/></li> </ul> <p class="lunbopoint"> <span class="on"></span> <span></span> <span></span> <span></span> </p> <div id="upimg"><</div> <div id="downimg">></div> </div> <script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script> </body> </html>
@charset "utf-8"; *{ margin: 0; padding: 0; } #banner{ width:1024px; height:640px; margin:auto; overflow: hidden; margin-top:60px; position: relative; } .clearfix:after{ content: ‘‘; display: block; clear: both; } .lunbotu{ list-style: none; position: absolute; top: 0; left: 0; } .lunbotu li{ float: left; } .lunbopoint{ width: 100%; text-align: center; position: absolute; bottom: 20px; } .lunbopoint span{ display: inline-block; width:20px; height:20px; background-color:white; border-radius: 50%; margin-right: 10px; cursor: pointer; } .lunbopoint .on{ background-color: red; } #upimg{ position: absolute; left: 20px; top:280px; font-size: 60px; background: #A9A9A9; opacity: 0.6; cursor: pointer; } #downimg{ position: absolute; right: 20px; top:280px; font-size: 60px; background: #A9A9A9; opacity: 0.6; cursor: pointer; } #upimg:hover{ opacity: 0.8; } #downimg:hover{ opacity: 0.8; }
var banner=document.getElementById(‘banner‘); lunbo=banner.getElementsByClassName(‘lunbotu‘); lunbotu=lunbo[0].getElementsByTagName(‘li‘); lunbopo=banner.getElementsByClassName(‘lunbopoint‘); lunbopoint=lunbopo[0].getElementsByTagName(‘span‘); upimg=document.getElementById(‘upimg‘); downimg=document.getElementById(‘downimg‘); lunbo[0].style.width=lunbotu[0].offsetWidth*lunbotu.length+"px"; var num=0; //建立轮播换图的函数，在这里function（）里面别添加参数num，否则会有问题 var changeimg=function(a){ num++; if(num>lunbotu.length-1){ num=0; } lunbo[0].style.left=-lunbotu[0].offsetWidth*num+"px"; for(i=0;i<lunbopoint.length;i++){ lunbopoint[i].className=‘‘; //改变类名无须添加style，直接加.className } lunbopoint[num].className=‘on‘; } //开始轮播.定时执行changeimg函数 var a=setInterval(changeimg,3000); //点击下一张直接进行向下换图 downimg.onclick=changeimg upimg.onclick=function(){ for (i=0;i<lunbopoint.length;i++) { if (lunbopoint[i].className==‘on‘) { var j=i; if(j==0){ j=3; }else{ j=j-1; } lunbo[0].style.left=-lunbotu[0].offsetWidth*j+"px"; for(i=0;i<lunbopoint.length;i++){ lunbopoint[i].className=‘‘; } lunbopoint[j].className=‘on‘; //改变全局变量num的值，使其能从当前循环 num=j; } } } //点击圆纽执行的变化 for (i=0;i<lunbopoint.length;i++) { lunbopoint[i].onclick=function changetu(){ //这里一定要加上for循环，否则识别不了if判断的i for (i=0;i<lunbopoint.length;i++) { if (lunbopoint[i]==this) { var j=i; lunbo[0].style.left=-lunbotu[0].offsetWidth*i+"px"; for(i=0;i<lunbopoint.length;i++){ lunbopoint[i].className=‘‘; } lunbopoint[j].className=‘on‘; //改变全局变量num的值，使其能从当前循环 num=j; } } } } //鼠标移上去时，清空定时器 banner.onmouseover=function(){ clearInterval(a); } //鼠标移开时重新执行定时器 banner.onmouseout=function(){ a=setInterval(changeimg,3000); }
自己写的轮播图代码，如有疑问请留言，图片宽度为1024乘600
标签：
原文地址：http://www.cnblogs.com/studyhtml5/p/5940295.html
