网站建设资讯

NEWS

网站建设资讯

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

效果图:鼠标划过箭头的效果图

js实现轮播图(二)当鼠标点击到箭头,图片会跟着变化,下面的小圆圈也会跟着显示对应图片的高亮效果

js实现轮播图(二)总结:

 基本轮播效果已经实现,后期需要做的事:是对代码要进行精简,封装,提高运行效率。

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


文章标题:js实现轮播图(二)-创新互联
路径分享:http://njwzjz.com/article/diojcp.html