首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生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图片轮播

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

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

- Author -

qq_36400099

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
vue数据响应式原理知识点总结
Feb 16 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
CAD(1) 404(1) Sunmao(1) 403(1) sout(1) macos(1) xps(1) csgo(1) Sentry(1) svg(1)
You might like
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
潜说js对象和数组
2011/05/25 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python代码如何注释
2020/06/01 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
高中语文教学反思
2014/01/16 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
预备党员个人总结
2015/02/14 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python