JS原生带小白点轮播图实例讲解_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 02:27:24 点击率：次

咱们刚刚说了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原生带小白点轮播图实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# 原生js轮播图 # 原生js实现轮播图的示例代码 # 原生js实现轮播图 # 原生js实现图片轮播特效 # 原生js和jquery实现图片轮播特效 # 原生JS实现图片轮播效果 # 原生js图片轮播效果实现代码 # 给大家 # 小圆 # 第一个 # 给他 # 说了 # 遍历 # 计时器 # 希望能 # 这篇 # 每隔 # 小编 # 相对应 # 大家多多 # 点吧 # 你懂 # 加载 # 完成后 # list # left # img

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：剩饭隔夜放冰箱还能吃吗剩饭安全加热方法

下一篇：厦门SEO培训如何快速提升网站排名？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：剩饭隔夜放冰箱还能吃吗剩饭安全加热方法

下一篇：厦门SEO培训如何快速提升网站排名？