最简单 最详细的原生js写轮播图

最简单最详细的原生js写轮播图

该轮播图实现了自动轮播，图片切换，鼠标移入移出事件，布局简单，容易上手。希望能帮到大家。效果图如下：

布局扩展

里面用了几种方式实现了div的垂直居中，可见样式代码注释。

HTML

@HTML页面布局
 <!-- 介绍团队  -->
    <div id="introduce_page" class="page">
      <div id="banner"><!-- 轮播 -->
        <div id="pic"><!-- 轮播图片布局 -->
          <img src="images/1.jpg" id="img">
          <a href="javascript:;" id="prve"><</a><!-- 左边切换按钮 -->
          <a href="javascript:;" id="next">></a><!-- 右边边切换按钮 -->
          <span id="span">数量正在加载中......</span><!--图片数量 -->
          <p id="p">图片正在加载中.......</p><!--图片说明 -->
          <ul id="ul"></ul><!-- 轮播小圆点 -->
        </div>
        <div id="word">轮播图片文字介绍正在加载中....... </div><!--介绍文字说明-->
      </div>
    </div> 

CSS

@css样式布局
 #introduce_page{  
    background:rgb(10, 10, 10);  
    border: solid 1px rgba(0,0,0,0);
}   

#banner{
    width: 50%;
    height: 50%;
    border: solid 2px rgba(238,238,238,0.13);
    vertical-align: middle;
    /* 垂直居中banner */
    position: relative;
    left: 50%; /* 定位父级的50% */
    top: 50%;
    transform: translate(-50%,-50%); /*自己的50% */
    color: aliceblue;
}

#pic{
    width: 70%;
    height: 100%;
    float: left;
    border: solid 1px rgba(238,238,238,0.13);
    position: relative;
}

#word{
    width: 20%;
    height: 50%;
    float: right;
    border: solid 1px rgba(238,238,238,0.13);
    margin: auto;  
    /* 垂直居中靠右文字介绍 */
    position: absolute;  
    top: 0;bottom: 0; right: 0; 

}

#prve{
    /* 垂直居中靠左切换按钮*/
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

#next{
      /* 垂直居中靠右切换按钮 */
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

a{
    width: 40px;
    height: 40px;    
    text-decoration: none;
    font-size: 30px;
    background: #000000;
    color: #ffffff;
    filter: alpha(opacity 40);
    opacity: 0.4;
}

a:hover{
    filter: alpha(opacity 90);
    opacity: 0.9;
}

img{
    height: 100%;
    width: 100%;
}

#p,#span{
    width: 100%;
    height: 30px;
    filter:alpha(opacity 40);
    opacity: 0.4;
    background-color: black;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    border: solid 1px rgba(0,0,0,0);
}

#span{
    position: absolute;
    top:0;
}
#p{
    position: absolute;
    left: 0;right: 0;
    bottom: 0;margin: auto;
} 


#ul{
    margin: 0;
    padding: 0;
    width:14%;
    height: 30%;
    text-align: center;
    border: solid 1px rgba(0,0,0,0);
    position: absolute;
    right: 0;left: 0;bottom: 30px;
    margin: auto;
    height: 20px;
}

#ul li {
    width: 13px;
    height: 13px;
    list-style: none;
    border-radius: 100%;
    float: left;
    margin:0 2px;
    border: 1px #ccc solid;

}

.on{
    background-color: #ffffff;
}

JavaScript

@JavaScript代码
 //获取元素
var oBanner=document.getElementById('banner');
var oPic=document.getElementById('pic');
var oImg=document.getElementById('img');
var oPrve=document.getElementById('prve');
var oNext=document.getElementById('next');
var oSpan=document.getElementById('span');
var oP=document.getElementById('p');
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');
var oText=document.getElementById('word');

//数组存放在图片的地址，数量（模拟数据）
var arrUrl=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
var arrTitle=['图片1','图片二','图片三','图片四'];
var arrText=['图片1介绍文字片段','图片2介绍文字片段','图片3介绍文字片段','图片4介绍文字片段'];
var num=0;

//往ul里面动态添加li
for(var i=0;i<arrUrl.length;i++){
    oUl.innerHTML+='<li></li>';
}

console.log(oUl);

//点击图片切换
function fnTab(){
    oImg.src=arrUrl[num];//改图片的src
    oSpan.innerHTML=1+num+'/'+arrUrl.length;//图片数量字符串拼接  '1/4' 的形式.
    oP.innerHTML=arrTitle[num];//图片标题
    oText.innerHTML=arrText[num];//图片介绍文字
    for(var i=0;i<aLi.length;i++)//切换小圆点样式
    {
        aLi[i].className='';
    }
    aLi[num].className='on';
}
fnTab();

//点击左边
oPrve.onclick=function(){
    num--;
    if(num==-1)
    {
        num=arrUrl.length-1;
    }
    fnTab();
}

//点击右边
oNext.onclick=function(){
    num++;
    if(num==arrUrl.length)
    {
        num=0
    }
    fnTab();
}

//点击小圆点
for(var i=0;i<aLi.length;i++){
    aLi[i].index=i;//自定义属性，索引值
    aLi[i].onclick=function(){
        num=this.index;
        fnTab();
    }

}

//定时器自动轮播
var timer=null;
function autoPlay(){
    timer=setInterval(function(){
        num++;
        num%=arrUrl.length;
        fnTab();
    },1000);
}

// autoPlay();
setTimeout(autoPlay,2000);

//鼠标移入清除定时器
oBanner.onmouseover=function(){
    clearInterval(timer);
}

//鼠标移出
oBanner.onmouseout=autoPlay;