原生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 获取时间间隔实现代码
May 12 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
JS实现的雪花飘落特效示例
Dec 03 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
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
php实现websocket实时消息推送
2018/03/30 PHP
js 实现菜单上下显示附效果图
2013/11/21 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
javascript中Function类型详解
2015/04/28 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
Python创建日历实例
2014/08/21 Python
Python解释执行原理分析
2014/08/22 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
物流业务员岗位职责
2015/04/03 职场文书
大学生党课心得体会
2016/01/07 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python