原生js实现网易轮播图效果


Posted in Javascript onApril 10, 2020

一、实现效果图

原生js实现网易轮播图效果

二、分析布局

主盒子里分上下两个小盒子(1和2)。
包含图片的盒子占两张图片的宽(3),处于上盒子中,当前图片在上盒子(1)中,其它图片在盒子(3)的右侧等待播放。
下边的盒子(2)包括了六个小方块及定位在主盒子上的两个箭头。

三、html部分  

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>wangyi</title>
 <link type="text/css" rel="stylesheet" href="css/guide.css"/>
 <script type="text/javascript" src="../animate.js"></script>
 <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
 <div class="w-slider">
 <div class="slider">
  <div class="slider-main" id="slider_main_block">
  <div class="slider-main-img"><a href="#"><img src="images/1.jpg"/></a></div>
  <div class="slider-main-img"><a href="#"><img src="images/2.jpg"/></a></div>
  <div class="slider-main-img"><a href="#"><img src="images/3.jpg"/></a></div>
  <div class="slider-main-img"><a href="#"><img src="images/4.jpg"/></a></div>
  <div class="slider-main-img"><a href="#"><img src="images/5.jpg"/></a></div>
  <div class="slider-main-img"><a href="#"><img src="images/6.jpg"/></a></div>

  </div>
 </div>
 <div class="slider-ctrl" id="slider_ctrl">
  <span class="slider-ctrl-pre"></span>
  <span class="slider-ctrl-next"></span>
 </div>
 </div>
</body>
</html>

四、CSS部分

* {
 margin: 0;
 padding: 0;
}
.w-slider {
 width:310px;
 height:265px;
 margin:100px auto;
 overflow: hidden;
 position: relative;
}
.slider {
 width:310px;
 height:220px;

}
.slider-main {
 width:620px;
 height:220px;
}
.slider-main-img{
 width:310px;
 height:220px;
 position:absolute;
 top:0;
 left:0;
}
.slider-main-img img{
 vertical-align: top;
}
.slider-ctrl {
 width:310px;
 height:45px;
 text-align:center;
}
.slider-ctrl span {
 cursor: pointer;
}
.slider-ctrl-con {
 display:inline-block;
 width:24px;
 height:20px;
 margin-right:8px;
 text-indent: -20em;
 overflow:hidden;
 background:url(../images/icon.png)-24px -782px no-repeat;
}
.slider-ctrl .current {
 background:url(../images/icon.png)-24px -762px no-repeat;
}
.slider-ctrl-pre,
.slider-ctrl-next {
 width:27px;
 height:38px;
 position:absolute;
 top:50%;
 margin-top:-36px;
 opacity:0.7;
 filter:alpha(opacity=50);
}
.slider-ctrl-pre {
 background:url(../images/icon.png)6px 1px no-repeat;
 left:0;
}
.slider-ctrl-next {
 background:url(../images/icon.png)-9px -44px no-repeat;
 right:0;
}

五、JS部

/**
 * Created by 15623544233 on 2016/10/17.
 */
window.onload=function () {
 //imgs的DOM对象
 var slider_main_block =$("slider_main_block");
 var sliderImgs =slider_main_block.children;
 //最外层的slider大盒子
 var sider_box =slider_main_block.parentNode.parentNode;
 //slider-ctrl的DOM对象
 var slider_ctrl = $("slider_ctrl");
 var sliderCtrls =slider_ctrl.children;
 //动态添加Ctrl
 for(var i=0;i<sliderImgs.length;i++){
 var spans = document.createElement("span");
 spans.className="slider-ctrl-con";
 //span中的数字为当前的索引,后面有重要作用
 spans.innerHTML =sliderImgs.length-i;
 slider_ctrl.insertBefore(spans,sliderCtrls[1]);
 }

 sliderCtrls[1].setAttribute("class","current slider-ctrl-con");
 //imgW ---图片宽
 var imgW = sliderImgs[0].clientWidth;
 //让除第一张图以外的所有图右移
 for(var i=1;i<sliderImgs.length;i++){
 sliderImgs[i].style.left=imgW+"px";
 }
//至关重要的标志位,currentId 当前出现的盒子  
 var currentId = 0;
 for(var key in sliderCtrls){
 sliderCtrls[key].onclick =function () {
  //左箭头点击的运动动画 
  if(this.className=="slider-ctrl-pre"){
  //与左移动参数相反
  animate(sliderImgs[currentId],{left:imgW});
  --currentId<0?currentId=sliderImgs.length-1:currentId;
  sliderImgs[currentId].style.left=-imgW+"px";
  animate(sliderImgs[currentId],{left:0});
  //右箭头的运动动画,与自动轮播的运动动画一致
  }else if(this.className=="slider-ctrl-next"){
  autoPlay();
  }else{
  //得到当前要点击的图片索引号
  var that = this.innerHTML-1;
  if(that>currentId){
   //像点击右侧按钮一样播放
   animate(sliderImgs[currentId],{left:-imgW});
   sliderImgs[that].style.left=imgW+"px";

  }else if(that<currentId){
   animate(sliderImgs[currentId],{left:imgW});
   sliderImgs[that].style.left=-imgW+"px";

  }
  /*当点击按钮后,当前图片currentId移动后,所点击的盒子成为当前的图片,使图片连续*/
  currentId =that;
  animate(sliderImgs[currentId],{left:0});

  }
  flashCurrent((currentId+1));
 };

 }
 //小方块控制slider动画的函数
 function flashCurrent(index) {
 //console.log(index);
 for(var i=1;i<sliderCtrls.length-1;i++){
  sliderCtrls[i].setAttribute("class","slider-ctrl-con");
 }
 sliderCtrls[index].setAttribute("class","current slider-ctrl-con");
 }
 //添加定时器
 var timer =null;
 timer =setInterval(autoPlay,2000);
 function autoPlay() {
 animate(sliderImgs[currentId],{left:-imgW});
 //当第6张左移走后,6>5,第0张回到框中
 ++currentId>sliderImgs.length-1?currentId = 0:currentId;
 //上一张图片左移后,下一张图片快速到右边
 sliderImgs[currentId].style.left=imgW+"px";
 //下张右侧图片左移
 animate(sliderImgs[currentId],{left:0});
 }
 sider_box.onmouseover =function () {
 clearInterval(timer);
 }
 sider_box.onmouseout=function () {
 timer =setInterval(autoPlay,2000);
 }

};
function $(id) {
 return document.getElementById(id);
}
 /*当前样式属性值的获取 */
function curStyle(obj,attr){
 if(obj.currentStyle){
//IE浏览器 
 return obj.currentStyle[attr];
 }else{
 //标准浏览器 
 return window.getComputedStyle(obj,null)[attr];
 }
}
 /*封装的运动框架*/
/*obj ----做动画的DOM对象 ;json----变化的部分是json数据 */   
function animate(obj,json) {
//调用时先清定时器  
 clearInterval(obj.timer);
//定时器为obj的内部定时器,不用每次调用都创建一个新的定时器  
 obj.timer = setInterval(function () {
//遍历json数据,每次遍历的标志位为flag  
 var flag=true;
//遍历json数据,eg:{left:20,top:40,opacity:50,z-index:3}  
 for(var key in json){
  //取得盒子运动当前的位置
  var current= 0;
  if(key=="opacity"){
  //Ie6,7,8没有设置透明度,默认为undefined
  current =Math.round(parseInt(curStyle(obj,key)*100))||1;
  //console.log(current);
  }else{
  current= parseInt(curStyle(obj,key));
  }

//运动步长:(目标位置-当前位置)/10
  var step = (json[key]-current)/10;
  step = step>0?Math.ceil(step):Math.floor(step);
//各属性值的渐变动画  
  if(key=="opacity"){
  if("opacity" in obj.style){
   obj.style.opacity = (current+step)/100;
  }else{
   //兼容ie6,7,8
   obj.style.filter ="alpha(opacity ="+(current+step)*10+")";
  }
  }else if(key=="zIndex"){
  obj.style[key] =json[key];
  }else
  {
  obj.style[key] = current+step+"px";
  }

//遍历每个属性时都判断标志位
  if(current!=json[key]){
  flag =false;
  }
 }遍历结束后,标志位都为true,判断起所有动画执行完毕,清除定时器
 if(flag){
  clearInterval(obj.timer);
 }
 },20)

}

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
ie 调试javascript的工具
Apr 29 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 #Javascript
JSON对象 详解及实例代码
Oct 18 #Javascript
简易的JS计算器实现代码
Oct 18 #Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 #Javascript
jquery中用jsonp实现搜索框功能
Oct 18 #Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 #Javascript
浅谈js的异步执行
Oct 18 #Javascript
You might like
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
用javascript做拖动布局的思路
2008/05/31 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
python通过post提交数据的方法
2015/05/06 Python
python计算方程式根的方法
2015/05/07 Python
Python yield 使用浅析
2015/05/28 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python装饰器用法示例小结
2018/02/11 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
对Python w和w+权限的区别详解
2019/01/23 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
试用期转正鉴定评语
2014/01/27 职场文书
文案策划求职信
2014/04/14 职场文书
出国签证在职证明范本
2014/11/24 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
把77A收信机改造成收音机
2022/04/05 无线电