原生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 相关文章推荐
javascript 随机展示头像实现代码
Dec 06 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
JS实现吸顶特效
Jan 08 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 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遍历目录方法小结
2015/03/10 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
TensorFlow实现创建分类器
2018/02/06 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
学校教师安全责任书
2014/07/23 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
Go web入门Go pongo2模板引擎
2022/05/20 Golang