Home > Developer > JavaScript
The picture carousel component is a very common technique in Web pages, but if written directly, it takes a long time to encode the JavaScript and not to control the size.
If you use bootstrap to write a picture Carousel component Carousel, you can save a lot of time.
At the same time, carousel the original meaning of the word is a roundabout.
I. BASIC OBJECTIVES
On the Web page to write multiple pictures of the Carousel component Carousel, the mouse on the top of its own hover effect, and in each picture with a picture description.
Because the author of the computer video recording software comparison Slag, also feel that there is no need to draw too much time on this, I think as long as can explain the problem on the line, so the following GIF pale more serious, but the basic effect is also shown.
This bootstrap picture Carousel Component Carousel, incompatible IE6 with 7, need IE6 support, to go to "despise IE6" website to download bootstrap component support (click to open link). Also, the picture file description in Google Chrome will have a little bit of black, but it doesn't affect browsing:
The display is different in different browsers. IE8 's words are such effects:
Second, the basic idea
See page layouts:
Third, the production process
1, with the previous "JavaScript" using bootstrap to write a pop-up in the current page of the dialog box, you can close, do not jump, non-pop window "The first step (click the Open link)
Because the need to use bootstrap, so first on the official website (click Open link) to download the components, for the production environment bootstrap version (click Open link), BOOTSTRAP3 is not compatible with 2, we recommend to use BOOTSTRAP3 directly according to their development documents. This article is also made according to BOOTSTRAP3. While BOOTSTRAP3 provides JavaScript effect to jQuery1.11 (click to open link) support, can go to the jquery official website to download compatible with the old browser IE6 jQuery1.11 (click the Open link), not incompatible with the IE6 of the old browser JQuery2. When you are finished downloading, configure the site directory. The Bootstrap3 directly extracted to the site directory, and put jquery-1.11.1.js into the JS directory, that is, the same directory with Bootstrap.js, the structure of the site folder is roughly as follows:
2, the following is the full code of the Web page, the following part of the description:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
(1)
(2) <body> partDeclare a container container, which allows all elements of the Web page to be automatically centered on the page, and then write the elements in the container.
Start by writing a header, declaring a header, and then writing a text inside it.
<div class= "Page-header" >An unnamed layer div is then defined, primarily for the purpose of standardizing the image carousel component. Bootstrap picture the size of the carousel component cannot be specified for its elements, the width and height parameters are added. This will distort the picture carousel component. At the same time, the component must be centered, and the Margin-right:auto should be used in the Div's style attribute; Margin-left:auto; to constrain, adding align= "center" is no effect at all.
Finally, a detailed description of each part of the picture component:
<div style= "width:640px; height:480px; Margin-right:auto; Margin-left:auto; " ><!--The name of the carousel component for the carousel,data-ride element is bootstrap required, Data-interval value is every 1000 milliseconds, that is, 1 seconds for a picture, this value is too small component distortion-- <div id= "Carousel" class= "Carousel Slide" data-ride= "Carousel" data-interval= "$" ><!--there are several pictures defined here, If one more picture, add one more, data-slide-to value plus one, the first picture is the No. 0 picture must have class= "active" otherwise the component will not work--><ol class= " Carousel-indicators "><li data-target=" #carousel-example-generic "data-slide-to=" 0 "class=" active "></ Li><li data-target= "#carousel-example-generic" data-slide-to= "1" ></li><li data-target= "# Carousel-example-generic "data-slide-to=" 2 "></li></ol><div class=" Carousel-inner "role=" listbox > <!--The following is a detailed edit of each picture, the first image must have the class value of item active, and the rest is Item--><div class= "Item Active" > <!--Click Img0.jpg This image to open img0.jpg hyperlinks, if you do not need hyperlinks, then remove the <a> tags--><a href= "images/img0.jpg" > </a> <div class= "Carousel-caption" > <!--pictures Text description-->
"JavaScript" uses bootstrap to write picture Carousel Carousel
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
