快捷導(dǎo)航

JS原生帶小白點(diǎn)輪播圖實(shí)例講解

更新時(shí)間：2017年07月22日 08:46:30 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JS原生帶小白點(diǎn)輪播圖實(shí)例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

咱們剛剛說(shuō)了js原生輪播圖，現(xiàn)在給他加上可以隨著一起走動(dòng)的小圓點(diǎn)吧！

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;
 
 }
 
/*小白點(diǎn)的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">
//頁(yè)面加載完成后 執(zhí)行代碼
 window.onload = function(){
  //獲取 ul
  var imgUl = document.getElementsByTagName("ul")[0];
  var groundUl = document.getElementById("round_ul");

  //把第一個(gè)小白點(diǎn)修改成紅色children 節(jié)點(diǎn)的子節(jié)點(diǎn)(不算空白節(jié)點(diǎn))
  groundUl.children[0].style.backgroundColor = "red";

  var sId,x = 0;
  //開始計(jì)時(shí)器函數(shù)

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

   //每隔10秒修改ul的坐標(biāo),修改1px
   imgUl.style.left = x-- +"px";
   //如果一張圖片完全進(jìn)入到div中
   if(x % 500 == 0){
    //調(diào)用修改小白點(diǎn)函數(shù)
    if(x == -2000){
     x = 0;
     imgUl.style.left = 0 +"px";
    }
    changLi(Math.abs(x/500));//調(diào)用修改小白點(diǎn)方法
    clearInterval(sId);//暫定定時(shí)器
    setTimeout(fn,1000);//隔100毫秒在次啟動(dòng)定時(shí)器

   }
  }
  fn();
//修改小白點(diǎn)方法
  function changLi(num){
   //遍歷小白點(diǎn)數(shù)組
   for(var x = 0;x<4;x++){

    //把所有的點(diǎn)修改成藍(lán)色
    groundUl.children[x].style.backgroundColor = "#2196f3";
   }
   //把相對(duì)應(yīng)的小白點(diǎn)修改成紅色
   groundUl.children[num].style.backgroundColor = "red";
  }
 }
</script>

就是這樣??！你懂了嗎？？

以上這篇JS原生帶小白點(diǎn)輪播圖實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: