代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图完整版实例</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 750px;
height: 292px;
margin: 30px auto;
position: relative;
background: url("image1/7.png") center no-repeat lightslategray;
background-size: contain;
overflow: hidden;
}
.wrap .boxbanner{
position: absolute;
left: 0;
top: 0;
width: 3000px;
height: 292px;
}
.wrap .boxbanner img{
float: left;
width: 750px;
height: 292px;
vertical-align: middle;
}
.wrap ul{
position: absolute;
width: 140px;
left: 50%;
margin-left: -70px;
bottom: 10px;
}
.wrap ul li{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: lightslategray;
float: left;
cursor: pointer;
}
.wrap ul li+li{
margin-left: 20px;
}
.wrap ul li.active{
background-color: orangered;
}
.wrap a{
position: absolute;
width: 43px;
height: 67px;
top:50%;
margin-top: -30px;
background-image: url("image1/6.png");
background-repeat: no-repeat;
opacity: 0.5;
filter: alpha(opacity=50);
display: none;
}
.wrap a.Left{
left: 10px;
background-position: 0 0;
}
.wrap a.Right{
right: 10px;
background-position: -63px 0;
}
.wrap a:hover{
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<div class="wrap">
<div class="boxbanner">
<!--<img src="image1/1.jpg" alt="">
<img src="image1/2.jpg" alt="">
<img src="image1/3.jpg" alt="">
<img src="image1/4.jpg" alt="">-->
</div>
<ul>
<!--<li class="active"></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<a href="javascript:void(0);" class="Left"></a>
<a href="javascript:void(0);" class="Right"></a>
</div>
<script src="js/utils.js"></script>
<script src="js/moveEffect.js"></script>
<script src="js/animatSuper.js"></script>
<script src="js/banner1.js"></script>
</body>
</html>
//获取元素
var oWrap=utils.getByClass("wrap")[0];
var boxBanner=utils.getByClass("boxbanner",oWrap)[0];
var oUl=oWrap.getElementsByTagName("ul")[0];
var bLeft=utils.getByClass("Left",oWrap)[0];
var bRight=utils.getByClass("Right",oWrap)[0];
var aImg=boxBanner.getElementsByTagName("img");
var aLi=oUl.getElementsByTagName("li");
var data=null;
//获取后台数据
getData();
function getData() {
var xml=new XMLHttpRequest();
xml.open("GET","ajax/data.txt",false);//获取数据时以html文件位置为主；
xml.onreadystatechange=function () {
if(xml.readyState==4 && /^2\d{2}$/.test(xml.status)){
data=utils.jsonParse(xml.responseText);
}
};
xml.send(null);
}
//绑定数据
domSert();
function domSert() {
var str="";
var sli="";
for(var i=0; i<data.length; i++){
str+=`<img src="" realImg="${data[i].imgSrc}" alt="">`;
sli+=i==0? '<li class="active"></li>': "<li></li>";
}
str+=`<img src="" realImg="${data[0].imgSrc}" alt="">`;
boxBanner.innerHTML=str;
//重新设置boxBanner的宽度
boxBanner.style.width=aImg[0].offsetWidth*aImg.length+"px";
oUl.innerHTML=sli;
//重新设置ul的宽及margin-left值
oUl.style.width=aLi[0].offsetWidth*aLi.length+utils.getCss(aLi[1],"marginLeft")*(aLi.length-1)+"px";
oUl.style.marginLeft=-oUl.offsetWidth/2+"px";
}
//图片懒加载
showImg();
function showImg() {
for(var i=0; i<aImg.length; i++){
lazyImg(aImg[i]);
}
}
function lazyImg(img) {
if(img.loaded) return;
var imgFrg=new Image();
imgFrg.src=img.getAttribute("realImg");
imgFrg.onload=function () {
img.src=this.src;
imgFrg=null;
img.loaded=true;
};
imgFrg.onerror=function () {
alert("图片懒加载失败");
imgFrg=null;
img.loaded=true;
}
}
//进行轮播图设置
//创建全局变量n
var n=0;
//自动轮播图设置
var timer=setInterval(autoMove,3000);
//运动过程
function autoMove() {
//边界点判断
if(n>=aImg.length-1){
n=0;
boxBanner.style.left=-n*750+"px";
}
n++;
//boxBanner.style.left=-n*750+"px";
//n的值为1,2,3,4,1,2,3,4依次循环
animate({
ele:boxBanner,
duration: 700,
effect: 0,
target:{
left: -n*750
}
});
bannerTip();
}
//焦点跟随
function bannerTip() {
for(var i=0; i<aLi.length; i++){
aLi[i].className=i==n%aLi.length?"active":null;
/*if(i==n%aLi.length){
aLi[i].className="active";
}else{
aLi[i].className=null;
}*/
}
}
//鼠标移入停止，鼠标移出继续
oWrap.onmouseover=function () {
clearInterval(timer);
bLeft.style.display=bRight.style.display="block";
};
oWrap.onmouseout=function () {
timer=setInterval(autoMove,2000);
bLeft.style.display=bRight.style.display="none";
};
//焦点点击图片切换
handleChange();
function handleChange() {
for(var i=0; i<aLi.length; i++){
(function (index) {
aLi[index].onclick=function () {
n=index-1;
autoMove();
}
})(i);
}
}
//点击左右按钮切换
bLeft.onclick=function () {
if(n<=0){
n=aImg.length-1;
boxBanner.style.left=-n*750+"px";
}
n--;
animate({
ele:boxBanner,
duration: 700,
effect: 0,
target:{
left: -n*750
}
});
bannerTip();
};
bRight.onclick=autoMove;
