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 相关文章推荐
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
Vue 开发必须知道的36个技巧(小结)
Oct 09 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
PHP 的 __FILE__ 常量
2007/01/15 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
PHP attributes()函数讲解
2019/02/03 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
家装业务员岗位职责
2015/04/03 职场文书
演讲开场白和结束语
2015/05/29 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python