原生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 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
layui选项卡效果实现代码
May 19 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
详解Angular路由之路由守卫
May 10 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
vue如何使用rem适配
Feb 06 Vue.js
浅谈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
PHP return语句的另一个作用
2014/07/30 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
Python中的pprint折腾记
2015/01/21 Python
Python中%r和%s的详解及区别
2017/03/16 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python中请不要再用re.compile了
2019/06/30 Python
Python缓存技术实现过程详解
2019/09/25 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
自行车广告词大全
2014/03/21 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
孔庙导游词
2015/02/04 职场文书