JS原生带小白点轮播图实例讲解


Posted in Javascript onJuly 22, 2017

咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧!

css代码:

*{
  margin:0px;
  padding: 0px;
 }
 ul{
  width: 2500px;
  height: 300px;
  position: absolute;
 }
 li{
  float: left;
  list-style: none;
 }
 img{
  width: 500px;
  height: 300px;
 }
 div{
  width: 500px;
  height: 300px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
 
 }
 
/*小白点的ul*/
 #round_ul{
  width:300px;
  height: 30px;
  /*background:yellow;*/
  position: relative;
  margin: 250px auto;
 
 }
 
 #round_ul li{
  width: 20px;
  height:20px;
  border-radius: 50%;
  background: #2196f3;
  margin-left: 50px;
  cursor: pointer;
 
 }

HTML代码:

<div>
 <ul>
  <li><img src="img/31.jpg"></li>
  <li><img src="img/32.jpG"></li>
  <li><img src="img/33.jpG"></li>
  <li><img src="img/34.jpg"></li>
  <li><img src="img/31.jpg"></li>
 </ul>
 <ul id="round_ul">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>

JS部分:

<script type="text/javascript">
//页面加载完成后 执行代码
 window.onload = function(){
  //获取 ul
  var imgUl = document.getElementsByTagName("ul")[0];
  var groundUl = document.getElementById("round_ul");

  //把第一个小白点修改成红色children 节点的子节点(不算空白节点)
  groundUl.children[0].style.backgroundColor = "red";

  var sId,x = 0;
  //开始计时器函数

  function fn(){
   sId = setInterval(abc,10);
  }
  function abc(){

   //每隔10秒修改ul的坐标,修改1px
   imgUl.style.left = x-- +"px";
   //如果一张图片完全进入到div中
   if(x % 500 == 0){
    //调用修改小白点函数
    if(x == -2000){
     x = 0;
     imgUl.style.left = 0 +"px";
    }
    changLi(Math.abs(x/500));//调用修改小白点方法
    clearInterval(sId);//暂定定时器
    setTimeout(fn,1000);//隔100毫秒在次启动定时器

   }
  }
  fn();
//修改小白点方法
  function changLi(num){
   //遍历小白点数组
   for(var x = 0;x<4;x++){

    //把所有的点修改成蓝色
    groundUl.children[x].style.backgroundColor = "#2196f3";
   }
   //把相对应的小白点修改成红色
   groundUl.children[num].style.backgroundColor = "red";
  }
 }
</script>

就是这样!!你懂了吗??

以上这篇JS原生带小白点轮播图实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
JS按钮闪烁功能的实现代码
Jul 21 #Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 #Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 #Javascript
Node接收电子邮件的实例代码
Jul 21 #Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 #Javascript
原生JS实现自定义滚动条效果
Oct 27 #Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 #Javascript
You might like
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP获取url的函数代码
2011/08/02 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
javascript实现评分功能
2020/06/24 Javascript
Python中的Numpy入门教程
2014/04/26 Python
python查询mysql中文乱码问题
2014/11/09 Python
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
用Python编写简单的定时器的方法
2015/05/02 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
大二法学专业职业生涯规划范文
2014/02/12 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js