JS原生轮播图的简单实现(推荐)


Posted in Javascript onJuly 22, 2017

哈喽!我的朋友们,最近有一个新项目。所以一直没更新!有没有想我啊!!

今天咱们来说一下JS原生轮播图!

话不多说:

直接来代码吧:下面是CSS部分:

*{
    padding: 0px;
    margin: 0px;
   }
   img{
    width: 500px;
    height: 300px;
   }
   li{
    float: left;
   }
   ul{
    width: 2000px;
    list-style: none;
    position: absolute;
   }
   div{
    width: 500px;
    height: 300px;
    /*溢出部分隐藏*/
    overflow: hidden;
    margin: 60px auto;
    position: relative;
   }

HTML部分!

<div>
 <ul>
  <li><img src="img/1.jpg" /></li>
  <li><img src="img/2.jpg"/></li>
  <li><img src="img/3.jpg"/></li>
  <li><img src="img/1.jpg" /></li>
 </ul>
</div>

接下来是JS部分:

//1、获取到ul
   var ul = document.getElementsByTagName("ul")[0];
   var x = 0;
   
   //id 用来关闭定时器的
   var id = setInterval(abc,10);
   
   function abc(){
    ul.style.left = x-- +"px";
    
    //如果到第三周图片了
    if(x == -1500){
     x = 0;//把ul修改成第一张图片
     ul.style.left = x+"px";
    }
    if(x % 500 == 0){ //第一张图片进来
     clearInterval(id); //关闭定时器
     //开启定时器 隔半秒钟开启定时器
     setTimeout(function(){
      //500毫秒之后开启定时器,继续执行
      id = setInterval(abc,10);
     },500);//setTimeout 延时执行
    }
   }

就是这么简单!你学会了吗??

以上这篇JS原生轮播图的简单实现(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
JS定时器实例
Apr 17 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
layui实现三级联动效果
Jul 26 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
JS+HTML5实现图片在线预览功能
Jul 22 #Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
JS原生带小白点轮播图实例讲解
Jul 22 #Javascript
JS按钮闪烁功能的实现代码
Jul 21 #Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 #Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 #Javascript
Node接收电子邮件的实例代码
Jul 21 #Javascript
You might like
PHP 组件化编程技巧
2009/06/06 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
smarty中js的调用方法示例
2014/10/27 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
判断单链表中是否存在环
2012/07/16 面试题
经理秘书岗位职责
2013/11/14 职场文书
渡河少年教学反思
2014/02/12 职场文书
解除劳动合同协议书
2014/09/17 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
企业投资意向书
2015/05/09 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Java实现多线程聊天室
2021/06/26 Java/Android
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
python中 .npy文件的读写操作实例
2022/04/14 Python