Bootstrap framework to realize _javascript skills of advertisement carousel effect

Previously wrote a native pure JS version of the ad carousel, compared to the previous one, this because of the use of the bootstrap framework, to achieve the code relatively simple, but also more beautiful, the effect is as shown: one of the pictures

This is one of the two pictures, you can see that there are small dots, in peace when you see some of the site, click the dot can switch pictures, in the order specified, and the above arrows, click the left and right arrows, you can move around, this is the general function.

Next on the code:
HTML code:

<!--advertising Carousel--> <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= "#" ></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>

This is the basic frame of the carousel AD, in this code, the first introduction of the bootstrap. Carousel class, which is defined in bootstrap, each of which is equal to the dot above. There must be a data attribute, otherwise it will not be implemented in bootstrap, each of the data properties are related to the JS code, so the data property can not be omitted.

JS Code:

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 code is mainly to create IMG and Li, in which to put pictures and add pictures of small dots. Add the corresponding class to each label, and it's OK.

Summary: The above code in the left and right arrows used bootstrap graphics library, use it is very convenient, with bootstrap we can save a lot of code, and the effect is very beautiful, but can not rely too much on the code or to write their own.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.