原生JS实现图片轮播切换效果


Posted in Javascript onDecember 15, 2016

首先来分析一下轮播图效果的实现原理:

1、父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden;

2、子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:absolute;

3、一个li即一张图片的宽度为父元素的显示宽度

4、初始时,ul的left为0,这时第一张图片即第一个li显示

5、点击下一张按钮,将整个ul左移,使第二个li对齐父元素的左边框,此时ul的left为负的一个li的宽度

6、点击上一张按钮,将整个ul右移

7、对特殊情况进行处理,即第一张图时点上一张,最后一张图时点下一张

第一张图时点上一张,我们滚动到最后一张图,整个ul左移,即把left值改为负的n-1张图的宽度;

最后一张图时点下一张,我们滚到第一张图的位置,整个ul右移,即把left值改为0

用一张图来帮助理解:

原生JS实现图片轮播切换效果

修改ul元素的left值很简单ul.style.left=设定值,就可以了,但我们想有一个滑动的效果,那我们需要用setInterval来实现

最后的效果如下:

原生JS实现图片轮播切换效果

动图不能录制太大CSDN有2M的限制_(:з?∠)_

下面放代码

script部分

<script>
 window.onload= function () {
  var nav=document.getElementById("nav").getElementsByTagName("li");
  var img=document.getElementById("imgList");
  var prev=document.getElementById("prev");
  var next=document.getElementById("next");
  var index=0;//当前图片序列号
  var timer;//定时器名字
  var iSpeed=-10;//滚动的速度
  function goRoll(){
   timer=setInterval(function () {
    img.style.left=img.offsetLeft+iSpeed+'px';
    var stop=-index*870+'px';//当达到目标位置是停止定时器
    if(img.style.left==stop){
     iSpeed=-10;
     clearInterval(timer);
    }
   },10)
  }
//  上一张和下一张点击效果
  prev.onclick= function () {
   if(index==0){
    index=2;
    iSpeed=-20;
   }else{
    index--;
    iSpeed=10;
   }
   goRoll();
   //img.style.left=-index*870+'px';

  };
  next.onclick= function () {
   if(index==2){
    index=0;
    iSpeed=20;
   }else{
    index++;
    iSpeed=-10;
   }
   goRoll();
   //img.style.left=-index*870+'px';
  };
 }
</script>

html放一下

<div class="panel center-panel bc_rice">
 <div class="panel-box">
  <a class="prev-btn" id="prev"></a>
  <div class="img-box">
   <div class="list-box">
    <ul class="img-list" id="imgList">
     <li>
      <img src="img/c1.jpg"/>
     </li>
     <li>
      <img src="img/c2.jpg"/>
     </li>
     <li>
      <img src="img/c3.jpg"/>
     </li>
    </ul>
   </div>
  </div>
  <a class="next-btn" id="next"></a>
  <img class="mT20" src="img/shadow1.png"/>
 </div>
 <div class="center-line bc_brown"></div>
</div>

CSS放一下

.fb{font-weight:bold;}
.c_fff{color:#fff;}
.f24{font-size:24px;}
.f72{font-size:72px;}
.lh40{line-height:40px;}
.bc_brown{background:#533d3b;}
.bc_green{background:#74cdab;}
.bc_rice{background:#ecf1c8;}
.bc_beige{background:#d1d5b0;}
.mT10{margin-top:10px;}
.mT20{margin-top:20px;}
.mT30{margin-top:30px;}
.mT40{margin-top:40px;}
.tc{text-align:center;}
.dblock{display:block;}
.clearfix:after{content:'';display:block;visibility:hidden;clear:both;line-height:0;font-size:0;}
.clearfix{zoom:1;}
html,body{width:100%;height:100%;font-size:14px;font-family:Myriad Pro;color:#433c3c;}
div,p,a,span,ul,li,em{margin:0;padding:0;}
ul li{list-style-type:none;}
a:hover{cursor:pointer;}
/*main-panel*/
.main-panel{width:100%;min-width:1030px;margin:0 auto;}
.main-panel .panel{width:100%;}
.main-panel .panel .line{width:100%;height:23px;background:url('../img/line.png');}
.main-panel .panel .panel-box{width:960px;height:100%;margin:0 auto;overflow:hidden;position:relative;}
.center-panel{height:510px;position:relative;}
.center-panel .panel-box{width:990px;z-index:1000;}
.center-panel .center-line{height:76px;position:absolute;width:100%;top:200px;z-index:10;}
.center-panel .panel-box a{width:51px;height:82px;display:block;position:absolute;top:200px;}
.center-panel .prev-btn{background:url('../img/Button-left.png');left:0;}
.center-panel .next-btn{background:url('../img/Button-right.png');right:0;}
.center-panel .img-box{width:940px;height:366px;background:url('../img/shadow.png');margin-top:45px;margin-left:10px;overflow:hidden;}
.center-panel .list-box{width:870px;height:334px;margin:16px auto;overflow:hidden;position:relative;}
.center-panel .img-list{width:4000px;height:334px;position:absolute;left:0;}
.center-panel .img-list li{width:870px;height:100%;float:left;}

因为我写了一整个页面都放出来没啥用,所以我只截取了用到的部分。
现在还是有些问题的,比如如果点击过快是会出问题的,这个以后看看能不能完善。

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

Javascript 相关文章推荐
jquery中.add()的使用分析
Apr 26 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jQuery ajax应用总结
Jun 02 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 #Javascript
利用vue写todolist单页应用
Dec 15 #Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 #Javascript
jQuery中的100个技巧汇总
Dec 15 #Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 #Javascript
详解jQuery中的事件
Dec 14 #Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 #Javascript
You might like
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php文件操作相关类实例
2015/06/18 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
财务会计应届生求职信
2013/11/24 职场文书
办理护照介绍信
2014/01/16 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
淘宝活动总结范文
2014/06/26 职场文书
物流业务员岗位职责
2015/04/03 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python