图片轮播

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

首先用户需要自己定义一个容器，并将容器的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.οnclick=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.οnclick=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.οnclick=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";
}