Using Bootstrap to build responsive web pages--banner (carousel) _javascript Tips

1, Bootstrap provides a JS plug-in---Carousel map

We still, directly to use, need to change the place to say.

2, modify

Small screen to see a small picture, large screen map to see the big picture: This can use the custom attributes (data-xxx) DATA-IMG-LG (save the larger image) and Data-img-xs (save the Small picture) properties to save the path of the picture, Use the data function of jquery to remove the Data-xxxx property for dynamic loading.

Picture Center display: Large picture with a background picture to do better, small plot with IMG to do better (because the small picture of the words need to scale, with the background figure can not be proportional scaling).

The height of the box carrying the carousel: the height of the picture, the small figure adaptively, so use the media query, set the container height.

3, Code

<section id= "banner" class= "Carousel Slide" data-ride= "Carousel" > <!--dots--> <ol class= "c Arousel-indicators "> <li data-target=" #banner "data-slide-to=" 0 "class=" active "></li> & Lt;li data-target= "#banner" data-slide-to= "1" ></li> <li data-target= "#banner" data-slide-to= "2" >& lt;/li> <li data-target= "#banner" data-slide-to= "3" ></li> </ol> <!--carousel Map Slice--> <div class= "Carousel-inner" role= "ListBox" > <div class= "Item Active" data-img-lg= Slide_01_2000x410.jpg "data-img-xs=" img/slide_01_640x340.jpg "> </div> <div class=" Item "Da ta-img-lg= "Img/slide_02_2000x410.jpg" data-img-xs= "img/slide_02_640x340.jpg" > </div> <div
          Class= "Item" data-img-lg= "Img/slide_03_2000x410.jpg" data-img-xs= "img/slide_03_640x340.jpg" > </div> <div class= "itEm "data-img-lg=" img/slide_04_2000x410.jpg "data-img-xs=" img/slide_04_640x340.jpg "> </div> < /div> <!--carousel--> <a class= "left Carousel-control" href= "#banner" role= "button" data-slide= " Prev "> <span class=" Glyphicon glyphicon-chevron-left "aria-hidden=" true "></span> <sp  An class= "sr-only" >Previous</span> </a> <a class= "right Carousel-control" href= "#banner" role= "button" data-slide= "Next" > <span class= "Glyphicon glyphicon-chevron-right" aria-hidden= "true" &GT;&L t;/span> <span class= "sr-only" >Next</span> </a> </section>

<script type= "Text/javascript" > $ (function () {//Get screen width//var screenwidth=$ (window). width (); Determine if the phone screen//if (screenwidth<768) {/////$ ("#banner. Carousel-inner. Item"). Each (function (i Ndex,item) {//var $item =$ (item);//Because the item being passed is a DOM object, change the DOM object to a JQuery object//$item. CSS ("background-image", "ur
L ("+ $item. Data (' Img-xs ') +") ");
//          }); }else{//Large screen//$ ("#banner. Carousel-inner. Item"). each (function (Index,item) {//var $item =$ (it
EM);//Because the item being passed is a DOM object, you want to change the DOM object to jquery object//$item. CSS ("background-image", "url (' + $item. Data (' IMG-LG ') + ')");
//          });
}//ternary/var isphone=screenwidth<768; $ ("#banner. Carousel-inner. Item"). each (function (Index,item) {//var $item = $ (item);//Because the item being passed is a DOM object, To change the DOM object to jquery object//$item. CSS ("background-image", "url (" + $item. Data (Isphone?)
Img-xs ': ' img-lg ') + ")");
        //        }); Function selEctimg () {var screenwidth=$ (window). width ();
          var isphone=screenwidth<768; $ ("#banner. Carousel-inner. Item"). each (function (Index,item) {var $item = $ (item);///Because the item being passed is a DOM object, change the DOM object to J The query Object $item. CSS ("background-image", "url" (' + $item. Data (Isphone?)
            Img-xs ': ' img-lg ') + '); We need a small map when equal proportions change, so we need an IMG tag if (isphone) {$item. html (" ');
            }else {$item. empty ();
        }
          }); //$ (window). On ("resize", selectimg);//This is not effective, the screen size must be changed before loading picture $ (window). On (' Resize ', selectimg). Trigger (
    ' Resize ');//triggers the Resize event, not the event handler selectimg}); </script>

The above is a small series to introduce the use of bootstrap to build response-style Web page-banner (carousel), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!