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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
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
php 生成饼图 三维饼图
2009/09/28 PHP
php 强制下载文件实现代码
2013/10/28 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
大学生水文观测实习自我鉴定
2013/09/29 职场文书
物流专业大学生求职信范文
2013/10/28 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
工程催款通知书
2015/04/17 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
oracle数据库去除重复数据
2022/05/20 Oracle
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技