自定义JavaScript轮播组件

本章主要讲解如何使用JavaScript编写一个自定义组件,用于广告图片的轮播,这个组件可以自己使用,也可以发给其他人,让其他人使用 .

一 、编写组件的步骤

1、编写组件的CSS ，并把文件命名为carouse.css

      * {
padding: 0px;
margin: 0px;
}
ul {
text-align: center;
width: 150px;
height: 20px;
position: relative;
left: 200px;
top: -30px;
}
li {
list-style: none;
float: left;
width: 20px;
margin-left: 5px;
border-radius: 20px;
background-color: #666666;
color: white;
}
#carouseldiv {
width: 100%;
/*600px;*/
height: auto;
margin: 0 auto;
text-align: center;
}

.liselected {
background-color: red;
}

.liunselected {
background-color: #666666;
}

#carouseldiv img {
/* width:100%;*/
max-width: 100%;
height: auto;
}

2、编写组件的JavaScript ,并把文件命名为carouse.js

            var imgIndex = 1; //初始化图片的下标值

        var img;//

        var lis=[];

        var imgs=[];

        var divw;

        var divh;

       function carousel(imgs2,numbers,divparent){

           imgs=imgs2;

       var div=document.createElement("div") ;

          div.id="carouseldiv";

          divparent.appendChild(div);

         // document.defaultView.getComputer(divObj,null).top

         divw= parseInt(document.defaultView.getComputedStyle(divparent,null).width);

        divh=parseInt(document.defaultView.getComputedStyle(divparent,null).height);

         

    // document.getElementsByTagName("body")[0].appendChild(div);

      img=document.createElement("img");

           img.src="img/"+imgs[0];

           img.id="img";

           div.appendChild(img);

           var ul=document.createElement("ul");

           ul.id="carouselUl";

           var q;

          if(divw>1200){

             q=0.5;

           }else if(divw>800){

            q=0.45;

           }else if(divw>500){

            q=0.4;

           }else if(divw>300){

            q=0.35;

           }else {

            q=0.3

           }

           var ulw=q*divw;

        var link = document.getElementsByTagName('link')[0];

    var sheet = link.sheet || link.styleSheet; //得到CSSStyleSheet

  link.sheet.rules[1].style.setProperty("left",ulw+"px");

           div.appendChild(ul);

           for(var k=0;k<numbers;k++){

             var li=document.createElement("li");

             li.innerHTML=parseInt(k)+1;

             lis[k]=li;

             ul.appendChild(li);

           }

          

           init();

            //计时轮播
var t = window.setInterval(play, 1000);
//鼠标悬浮到图片，停止轮播
img.onmouseover = function() {
window.clearInterval(t);
};
//鼠标移开图片，继续轮播
img.onmouseout = function() {

t = window.setInterval(play, 1000);
};
//当鼠标悬浮到某一个数字时，切换到指定的图片，停止轮播
for(var n = 0; n < lis.length; n++) {
lis
.onmouseover = function() {
window.clearInterval(t);//停止轮播
//当前正在轮播的数字的背景变为灰色
lis[imgIndex - 2].className = "liunselected";
//求出要切换到哪张图片，并赋值给imgIndex
imgIndex = parseInt(this.innerText);
//切换到指定的图片
img.src = "img/"+imgs[imgIndex-1];
//切换到指定的图片对应的数字背景变为红色
lis[imgIndex - 1].className = "liselected";
};
//当鼠标移出数字时，从当前图片继续轮播
lis
.onmouseout = function() {
t = window.setInterval(play, 1000);
}
}

        }  

        function init(){

       
img = document.getElementById("img"); //图片元素
//所有的装载数字1-6的li的集合
//lis = document.getElementById("carouselUl").getElementsByTagName("li");
//默认第一个数字的背景颜色为red
lis[0].className = "liselected";
//实现轮播的函数
}
function play() {

//如果轮播的图片的张数小于imgs.length
if(imgIndex <= imgs.length) {
//对应的装载数字的li变为红色，减一是因为
4000
数组下标值从0开始的
lis[imgIndex - 1].className = "liselected";
//当前正在轮播数字的下一个数字的li变为灰色
//imgIndex-1是求出当前正在轮播数字对应数组的下标值
//imgIndex-1-1是求出正在轮播数字的下一个数字的对应数组的下标值
if(imgIndex >= 2) {
lis[imgIndex - 1 - 1].className = "liunselected";
}
//轮播的图片

img.src = "img/"+imgs[imgIndex-1];
imgIndex++; //每次加一,即下一张图片
//如果轮播的图片的张数大于6，又从第一张开始，由此循环
} else {
img.src="img/"+imgs[0]; //第一张图片
imgIndex = 2; //下次轮播图片的索引值
lis[imgs.length-1].className = "liunselected"; //最后一个数字的背景颜色变为灰色
lis[0].className = "liselected"; //第一个数字的背景颜色变为红色
}

}

需要注意的是，carousel(参数1,参数2,参数3);其中第一个参数是要轮播图片的数组，其中第二个参数是要轮播图片的总张数，第三个参数是指整个轮播要放在哪个父节点下 。

二 、使用自定义组件 

   1、在要使用的该组件的工程中，引入 组件CSS文件 

     <link rel="stylesheet" href="css/carouse.css" />

   2、 在要使用的该组件的工程中，引入组件  JS文件 

     <script type="text/javascript" src="js/carouse.js" ></script>

  3、把要轮播的图片放到工程中的img文件下 

  4、调用组件的carousel方法，实现轮播功能

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/carouse.css" />
<style>
#div{
width:600px;
height: 180px;
margin: 0 auto;
position: absolute;
border: 1px solid red;  
}
</style>
<script type="text/javascript" src="js/carouse.js" ></script>
<script>

window.onload=function(){
var imges=['ad-01.jpg','ad-02.jpg','ad-03.jpg','ad-04.jpg'];
var div=document.getElementById("div")//装载组件的父节点
carousel(imges,imges.length,div);
}
</script>

</head>
<body>
<div id="div">
</div>

</body>

</html>