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 相关文章推荐
jQuery实现的类flash菜单效果代码
May 17 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
javascript中this用法实例详解
Apr 06 Javascript
js编写简单的计时器功能
Jul 15 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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基础学习之流程控制的实现分析
2013/04/28 PHP
Javascript MD4
2006/12/20 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
jQuery知识点整理
2015/01/30 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
jquery实现数字输入框
2017/02/22 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
三八妇女节致辞
2015/07/31 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL
Java 异步任务计算FutureTask
2022/04/28 Java/Android
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android