Exemple de partage de code d'un graphique carrousel natif js

L'éditeur ci-dessous vous apportera une image carrousel native JS avec des points blancs Explication avec exemples. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil

Nous venons de parler de l'image carrousel native js, ajoutez-y maintenant des petits points qui peuvent bouger avec elle !

Code CSS :

*{
  margin:0px;
  padding: 0px;
 }
 ul{
  width: 2500px;
  height: 300px;
  position: absolute;
 }
 li{
  float: left;
  list-style: none;
 }
 img{
  width: 500px;
  height: 300px;
 }
 p{
  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;
 
 }

Code HTML :

<p>
 <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>

Partie 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";
   //如果一张图片完全进入到p中
   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>

C'est ça ! ! Est-ce que tu comprends? ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!