快捷導(dǎo)航

Bootstrap框架實(shí)現(xiàn)廣告輪播效果

更新時(shí)間：2016年11月28日 10:24:42 作者：塞上江南果

這篇文章主要為大家詳細(xì)介紹了Bootstrap框架結(jié)合JavaScript實(shí)現(xiàn)廣告輪播特效,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

之前寫過一個(gè)原生純js版本的廣告輪播，相比之前那個(gè)，這個(gè)由于用了Bootstrap框架，實(shí)現(xiàn)起來代碼相對簡單一點(diǎn)，而且也比較美觀，效果如圖：其中某一張圖片

這是其中的兩張圖片，可以看到上面有小圓點(diǎn)，就和平時(shí)看到的一些網(wǎng)站的一樣，點(diǎn)擊圓點(diǎn)可以切換圖片，按照指定的順序，還有上面的箭頭，點(diǎn)擊左右箭頭，就可以左右移動(dòng)，這就是大體的功能。

接下來上代碼：
HTML代碼：

<!-- 廣告輪播 -->
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
 <ol class="carousel-indicators" id="dian">
 <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
 </ol>
 <div class="carousel-inner" id="change">
 <div class="item active">
  <a href="#"><img src="#" id="one"></a>
 </div>
 </div>
 <a class="left carousel-control" href="#ad-carousel" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#ad-carousel" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

這是輪播廣告的基本框架，在這段代碼中，首先就引入了bootstrap的.carousel類，它是bootstrap中定義的，每一個(gè)li相當(dāng)于上面的小圓點(diǎn)。其中必須要有data屬性，不然不會(huì)實(shí)現(xiàn)切換，在bootstrap中每一個(gè)data屬性都和js代碼相關(guān)，所以，data屬性不可省去。

js代碼：

function createImg()
 {
  var images = ["images/1.jpg","images/2.jpg","images/3.jpg", "images/4.jpg", "images/5.jpg"];
  var oltag = document.getElementById("dian");
  var divtag = document.getElementById("change"); 
  for (var i = 0; i < images.length; i++)
  {
  if (i == 0)
  {
   document.getElementById("one").src = images[i];
  }
  else
  {
   var li = document.createElement("li");
   li.setAttribute("data-target", "#ad-carousel");
   li.setAttribute("data-slide-to",""+(i+1));
   oltag.appendChild(li);


   var div = document.createElement("div");
   div.className = "item";
   var a = document.createElement("a");
   var img = document.createElement("img");
   img.src = images[i];
   a.appendChild(img);
   div.appendChild(a);
   divtag.appendChild(div);
  }
  }
 }

Js代碼主要是創(chuàng)建img和li，在里面放圖片和加上圖片的小圓點(diǎn)。在每個(gè)標(biāo)簽上加上對應(yīng)的類，就行了。

總結(jié)：以上代碼中的左右箭頭用了bootstrap的圖形庫，用起來也是很方便，有了bootstrap我們自己可以省很多代碼，而且效果也很漂亮，但是不能過多依賴，代碼還是要自己寫的。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: