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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
Node.js实现文件上传
Jul 05 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
详解jQuery选择器
Dec 21 Javascript
layui表格实现代码
May 20 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
vue实现前端分页完整代码
Jun 17 Javascript
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中文字母数字验证码实现代码
2008/04/25 PHP
php htmlspecialchars加强版
2010/02/16 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
浅谈django orm 优化
2018/08/18 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
国家励志奖学金获奖感言
2014/01/09 职场文书
员工工作表现评语
2014/04/26 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android