重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

js实现图片轮播图（一）-创新互联

一.实现原理

目前成都创新互联公司已为1000+的企业提供了网站建设、域名、网页空间、网站托管、服务器托管、企业网站设计、罗湖网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

（1）将所有图片放在一个父容器div里面，通过display属性来设置图片的出现与隐藏；

（2）轮播图分为手动轮播和自动轮播；

手动轮播的重点是每次点击图片下方的小圆圈，获得它的索引号，并让与之对应索引号的图片显示，并且此时的小圆圈为高亮显示；

自动轮播：利用定时器setInterval()，来每隔一定的时间来播放一次图片。

（3）所有的基础知识：dom操作，定时器，事件运用。

二.轮播图页面布局：

● ● ●

三.轮播图的css样式：

   #content{
    width: 100%;
    height:500px;
    position: relative;
}
.carousel-inner{
    position: relative;
    width: 100%;
    overflow: hidden; 
    height:500px; 
}

.carousel-inner>.item>img{
   display: block; 
    line-height: 1;   
    z-index: 1;
}

.carousel-indicators{
    position: absolute;
    bottom:10px;
    left:45%;
    z-index: 2;
    list-style-type: none;
}
.carousel-indicators li{
    display:inline-block;
    padding: 0 15px;
    font-size: 24px;
    color:#999;    
    cursor: pointer;
    z-index: 2;
      
}
 .active1{
    font-size: 28px;
    color:#fff;
}
.carousel-control{
    position: absolute;
    text-decoration:none;
    color: #999;
    font-weight: bold;
    opacity: .5;
    font-size: 40px;
    z-index: 3;

}
.carousel-control:hover{
    color:fff;
    text-decoration: none;
    opacity: .9;
    outline: none;
    font-size: 42px;
}

.prev{
    top: 30%;   
    left:20px; 
}
.next{
    top:30%;
    right: 20px;
}

四.轮播图的js实现代码：

window.onload = function(){
	
	//轮播初始化
	  var lunbo  = document.getElementById('content');
	  var imgs = lunbo.getElementsByTagName('img');	 
	  var uls = lunbo.getElementsByTagName('ul');
          var lis = lunbo.getElementsByTagName('li');

      //初始状态下，一个圆圈为高亮模式

	      lis[0].style.fontSize = '26px';
	      lis[0].style.color = '#fff';

	  //定义一个全局变量，用来进行自动轮播图片顺序的变化
	      var pic_index = 1;

	 //自动轮播.使用pic_time记录播放，可以随时使用clearInterval()清除掉。
	     var pic_time =  setInterval(autobofang,3000);

       //手动轮播
	    for(var i=0;i= lis.length){
	    		pic_index = 0;
	    	}

	    		change1(pic_index);
	    		pic_index++;
	      }
	     //自动播放的图片转化中的事件
	    function change1(index){	  	 		
                  
		  	 picChange(index);

                  //鼠标移入ul标签，自动播放图片暂停

		  	  uls[0].addEventListener("mouseover",pause,false);

		   //鼠标移出ul标签，自动播放图片继续

		  	  uls[0].addEventListener("mouseout",go,false);
		  	       
		}
       
       //自动播放暂停函数

       function pause(event){
       	    var event=event||window.event;
            var target=event.target||event.srcElement;
            switch(target.id){
            	case "pic1":
                    
                    clearInterval(pic_time);          
                    

            	break;
            	case "pic2":
                        
                      clearInterval(pic_time);
            	  

            	break;
            	case "pic3":
                    
            	     clearInterval(pic_time);
                     

            	break;
            }
       	   
       }
     
        //自动播放图片继续函数

         function go(event){
       	    var event=event||window.event;
            var target=event.target||event.srcElement;                  
            switch(target.id){
            	case "pic1":
                       
            	      pic_index = 1;  
            	      pic_time =  setInterval(autobofang,3000);
		  	         

            	break;
            	case "pic2":

                   pic_index = 2;                     
                   pic_time = setInterval(autobofang,3000);

            	break;
            	case "pic3":

            	    pic_index = 3;            	     
                    pic_time = setInterval(autobofang,3000);           	

            	break;
            }
       	   
       }
       }

五.效果图：

js实现图片轮播图（一）六.遇到的问题与不足

问题：当鼠标第一次移入ul标签时，自动轮播图片停止，鼠标移出，自动轮播继续，但是随着运行，轮播图片的变化速度越来越快，而且这时点击ul标签已经不起作用了。

问题原因：在后面停止轮播后再次轮播开始使用定时器的时候，没有给赋值给pic_time来记录，也就没有再次鼠标移到ul标签而清除定时器，因此导致再次点击ul标签不能暂停自动轮播播放，而且速度越来越快。

不足：没有实现类似淘宝轮播图那样平滑过渡的无现滚动的效果，左右箭头的指示作用也没有完成。这些在后期会继续学习，继续来完善，来分享.

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享文章：js实现图片轮播图（一）-创新互联
文章转载：http://cqcxhl.cn/article/dddepj.html