效果:图片自动切换;左右箭头控制切换;下方指示按钮切换;鼠标悬停暂停切换;三种切换方式:自动切换、箭头、指示按钮随机控制
html+css代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style>
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
.clearfix:after{content: ".";height: 0;overflow: hidden;display: block;clear: both;}
*html .clearfix{height: 1%;}
.banner{position: relative;max-width: 1920px;width: 100%;overflow: hidden;}
.bannerContent{position: absolute;left: 50%;}
.bannerContent li{display: none;}
.bannerContent li img{}
.bannerContent li.current{display: block;}
.bannerBtn{position: absolute;left: 50%;bottom: 25px;display: inline-block;text-align: center;}
.bannerBtn li{float: left;display: inline-block;width: 15px;height: 15px;border-radius: 100%;background: #ccc;margin-right: 8px;cursor: pointer;}
.bannerBtn li.current{background: #6f6cc7;}
.bannerBtn li:last-child{margin-right: 0;}
.bannerToggle span{position: absolute;top: 50%;margin-top: -25px;width: 50px;height: 50px;background: rgba(0,0,0,.5);color: #ccc;text-align: center;line-height: 50px;font-size: 36px;cursor: pointer;}
.bannerToggle .bannerPre{left: 50%;}
.bannerToggle .bannerNext{right: 50%;}
</style>
</head>
<body>
<div class="banner" id="banner">
<ul class="bannerContent clearfix">
<li><img src="images/image1.jpg" alt=""></li>
<li><img src="images/image2.jpg" alt=""></li>
<li><img src="images/image3.jpg" alt=""></li>
<li><img src="images/image4.jpg" alt=""></li>
<li><img src="images/image5.jpg" alt=""></li>
<!--
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img3.jpg" alt=""></li>
-->
</ul>
<div class="bannerToggle">
<span class="bannerPre"><</span>
<span class="bannerNext">></span>
</div>
<ul class="bannerBtn">
</ul>
</div>
<script src="js/lunbo.js"></script>
</body>
</html>
js代码:
window.onload=function(){
var banner=document.getElementById("banner");
var bannerContent=banner.getElementsByClassName("bannerContent")[0];
var bannerBtn=banner.getElementsByClassName("bannerBtn")[0];
var bannerLis=bannerContent.getElementsByTagName("li");
var bannerlisNum=bannerLis.length;
var imgWidth=bannerLis[0].getElementsByTagName("img")[0].width;
var imgHeight=bannerLis[0].getElementsByTagName("img")[0].height;
var bannerToggle=banner.getElementsByClassName("bannerToggle")[0];
var bannerPre=banner.getElementsByClassName("bannerPre")[0];
var bannerNext=banner.getElementsByClassName("bannerNext")[0];
var lunboid=0;//记录setTimeout的返回值
for(var i=0;i<bannerlisNum;i++){
var newbtnLis=document.createElement("li");
bannerBtn.appendChild(newbtnLis);
}
var btnLis=bannerBtn.getElementsByTagName("li");
bannerLis[0].className="current";
btnLis[0].className="current";
//得到bannerContent盒子的宽度
var width=bannerlisNum*bannerLis[0].getElementsByTagName("img")[0].width;
banner.style.height=imgHeight+"px";
bannerContent.style.width=imgWidth+"px";
bannerContent.style.marginLeft=-Math.round(imgWidth/2)+"px";
var btnWidth=bannerBtn.width;
//alert(btnWidth);
bannerBtn.style.marginLeft=-Math.round(btnWidth/2)+"px";
bannerPre.style.marginLeft=-imgWidth*0.45+"px"
bannerNext.style.marginRight=-imgWidth*0.45+"px"
function lunbo(n){
switch(n){
case bannerlisNum-1:
bannerLis[0].className="current";
bannerLis[n].className="";
btnLis[0].className="current";
btnLis[n].className="";
break;
default:
bannerLis[n].className="";
btnLis[n].className="";
var num=++n;
bannerLis[num].className="current";
btnLis[num].className="current";
break;
}
}
//banner图自动轮播
function imgLunbo(){
for(var i=0;i<bannerlisNum;i++){
if(bannerLis[i].className.indexOf("current")!=-1){
lunbo(i);
break;
}
}
lunboid=setTimeout(imgLunbo,1000);
}
imgLunbo();
//左右箭头切换
//上一张
function previous(){
for(var i=0;i<bannerlisNum;i++){
if(bannerLis[i].className.indexOf("current")!=-1){
if(i==0){
bannerLis[0].className="";
btnLis[0].className="";
bannerLis[bannerlisNum-1].className="current";
btnLis[bannerlisNum-1].className="current";
}else{
bannerLis[i].className="";
btnLis[i].className="";
var num=--i;
bannerLis[num].className="current";
btnLis[num].className="current";
}
clearInterval(lunboid);
lunboid=setTimeout(imgLunbo,1000);
break;
}
}
}
//下一张
function next(){
for(var i=0;i<bannerlisNum;i++){
if(bannerLis[i].className.indexOf("current")!=-1){
if(i==bannerlisNum-1){
bannerLis[i].className="";
btnLis[i].className="";
bannerLis[0].className="current";
btnLis[0].className="current";
}else{
bannerLis[i].className="";
btnLis[i].className="";
var num=++i;
bannerLis[num].className="current";
btnLis[num].className="current";
}
clearInterval(lunboid);
lunboid=setTimeout(imgLunbo,1000);
break;
}
}
}
bannerPre.onclick=previous;
bannerNext.onclick=next;
//下方指示图标切换
for(var i=0;i<bannerlisNum;i++){
(function(j){
btnLis[j].onmouseover=function(){
for(var n=0;n<bannerlisNum;n++){
if(n!=j){
bannerLis[n].className="";
btnLis[n].className="";
}else{
bannerLis[j].className="current";
btnLis[j].className="current";
}
}
clearInterval(lunboid);
lunboid=setTimeout(imgLunbo,1000);
};
})(i)
}
bannerContent.onmouseover=function(){
clearInterval(lunboid);
}
bannerContent.onmouseout=function(){
lunboid=setTimeout(imgLunbo,200);
}
}
总结:
1、代码中多次使用document.getElementById和document.getElementsByClassName;可以设置一个通用函数
2、className=""局限性比较大,可以通过+=和replace来控制class的切换