原生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 图片轮播(5张图片)
Dec 30 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python 列表理解及使用方法
2017/10/27 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python绘制随机网络图形示例
2019/11/21 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python标准库itertools的使用方法
2020/01/17 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
市场营销管理毕业生自荐信
2014/03/03 职场文书
卖车协议书
2014/04/21 职场文书
需求分析说明书
2014/05/09 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
安全环保演讲稿
2014/08/28 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python