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

在上一篇的基础上，增加了左右箭头的响应事件，实现了点击左右箭头也可以让图片滚动：

js代码如下：

window.onload = function(){
	
	//轮播初始化
	  var lunbo  = document.getElementById('content');
	  var imgs = lunbo.getElementsByTagName('img');	 
	  var uls = lunbo.getElementsByTagName('ul');
          var lis = lunbo.getElementsByTagName('li');
          var next = document.getElementById('next');
         var prev = document.getElementById('prev');
          var item = 0;
      //初始状态下，一个圆圈为高亮模式

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

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

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

         //自动播放的事件处理
       function autobofang(){
        
        if(pic_index >= lis.length){
          pic_index = 0;
        }

         picChange(pic_index);
          pic_index++;
       }
     
       //手动轮播
	 for(var i=0;i
效果图：鼠标划过箭头的效果图
当鼠标点击到箭头，图片会跟着变化，下面的小圆圈也会跟着显示对应图片的高亮效果
总结：
 基本轮播效果已经实现，后期需要做的事：是对代码要进行精简，封装，提高运行效率。
创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。
            

            网站栏目：js实现轮播图（二）-创新互联            

            本文网址：http://cdkjz.cn/article/diojcp.html