图片轮播

本文章介绍一下图片轮播插件的写法

首先用户需要自己定义一个容器，并将容器的Id作为参数传值，将需要展示的图片封装成数组，并可以自己设置一些参数，如下所示

<style>    #content{        width: 620px;        height: 300px;        margin: 0 auto;    }</style>

<div id="content"></div>

<script src="jrscrolling.js"></script><script>    var array=[{imgSrc:"images/01.jpg",title:"第一张"},{imgSrc:"images/02.jpg",title:"第二张"},{imgSrc:"images/03.jpg",title:"第三张"},{imgSrc:"images/04.jpg",title:"第四张"},{imgSrc:"images/05.jpg",title:"第五张"}];    init({        array:array,//装有图片详细信息的数组        id:"content",//用户自己创建的容器的Id        isAuto:true,//是否自动轮播        currentColor:"blue",//被选中的分页按钮的颜色        otherColor:"lightblue",//未选中的分页按钮的颜色        imgWidth:620,//要展示的图片的宽度        imgHeight:300,//要展示的图片的高度        duration:5//图片变化间隔的时间    });</script>

下面是封装的js文件

/** * Created by GZN on 2017/8/12. */var currentColor;var otherColor;var nowIndex=0;function init(obj){    var array=obj.array;//获取图片对象的数组    var dom=document.getElementById(obj.id);//获取容器    dom.style.position="relative";    dom.style.overflow="hidden";    var isAuto=obj.isAuto||false;//是否自动轮播    currentColor=obj.currentColor||"blue";//轮播到当前点的颜色    otherColor=obj.otherColor||"white";//普通点的颜色    var duration=obj.duration||1;//每张图片的停留时间    var imgWidth=parseFloat(obj.imgWidth)||620;//每张图片的宽度    var imgHeight=parseFloat(obj.imgHeight)||300;//每张图片的高度    //将图片添加到容器中    for(var i=0;i<array.length;i++){        var img=document.createElement("img");        img.src=array[i].imgSrc;        img.width=imgWidth;        img.height=imgHeight;        img.style.display="none";        dom.appendChild(img);    }    //添加分页按钮    var ul=document.createElement("ul");    dom.appendChild(ul);    ul.style.listStyle="none";    ul.style.position="absolute";    ul.style.left="50%";    ul.style.bottom="10px";    for(var i=0;i<array.length;i++){        var li=document.createElement("li");        ul.appendChild(li);        li.num=i;        li.style.width="10px";        li.style.height="10px";        li.style.borderRadius="50%";        li.style.backgroundColor=otherColor;        li.style.float="left";        li.style.marginLeft="5px";        li.onclick=change;    }    //添加左按钮    var leftDiv=document.createElement("div");    leftDiv.style.width="27px";    leftDiv.style.height="45px";    leftDiv.style.backgroundImage=" url('images/icon1.png')";    leftDiv.style.backgroundPosition="0 -321px";    leftDiv.style.position="absolute";    leftDiv.style.left="0px";    leftDiv.style.top="50%";    leftDiv.onclick=leftChange;    dom.appendChild(leftDiv);    //添加右按钮    var rightDiv=document.createElement("div");    rightDiv.style.width="27px";    rightDiv.style.height="45px";    rightDiv.style.backgroundImage=" url('images/icon1.png')";    rightDiv.style.backgroundPosition="-78px -321px";    rightDiv.style.position="absolute";    rightDiv.style.right="0px";    rightDiv.style.top="50%";    rightDiv.onclick=rightChange;    dom.appendChild(rightDiv);    initParam();    if(isAuto){        setInterval(function(){            scroll();        },duration*1000);    }}/** 轮播* */var imgs=document.getElementsByTagName("img");var lis=document.getElementsByTagName("li");function scroll(){    var num=nowIndex+1;    num=num%array.length;    changeState(num);}/** 分页按钮单击事件* */function change(){    changeState(this.num);}/** 左按钮单击事件* */function leftChange(){    var num;    if(nowIndex==0){        num=4;    }    else{        num=nowIndex-1;    }    changeState(num);}/* * 右按钮单击事件 * */function rightChange(){    var num;    if(nowIndex==4){        num=0;    }    else{        num=nowIndex+1;    }    changeState(num);}/** 更换当前图片和按钮* */function changeState(changeIndex){    imgs[nowIndex].style.display="none";    lis[nowIndex].style.backgroundColor=otherColor;    nowIndex=changeIndex;    imgs[nowIndex].style.display="inline-block";    lis[nowIndex].style.backgroundColor=currentColor;}/** 初始化系统参数* */function initParam(){    imgs[0].style.display="inline-block";    lis[0].style.backgroundColor=currentColor;    var ul=document.getElementsByTagName("ul")[0];    var ulWidth=ul.offsetWidth/2;    ul.style.marginLeft=-ulWidth+"px";}