Photo: Carousel. jpg
, the carousel shown, not only to switch the large background map, as well as text and some other pictures, but also animated display.
Of course, the implementation of this effect, there are similar plugins on the web. However, you can also write it yourself. Let's take a look here. Dry up!!!
The first step:
For the time being, we should not consider the dynamic, that is, the
page and content to be carousel display.
(Note: Carousel is also known as the slideshow, below, we will switch each picture, called the slide switch, each slide is implemented with an Li, and each slide can also contain other information, text, pictures can be, they are wrapped up in Div, and then, using class to specify the style, Let it show to the corresponding location)
As follows:
HTML code:
<ul>
<li thumb= "Img/wide1.jpg" >
<div class= "Li1sub1" ></div>
<div class= "li1sub2" ></div>
<div class= "Li1sub3" >my name is doubleyong</div>
<div class= "Li1sub4" ><a href= "#" >purcharse</a> </div>
</li>
</ul>
Step Two:
display the background of each slide
Instead of adding a style to each slide, you can specify the address of the background image by adding a thumb property on the Li, and then add the background image via JS
The code is as follows (JS):
var Liarr = document.getElementById ("banner"). getElementsByTagName ("Li");
For (Var i=0;i<liarr.length;i++) {
var imgsrc= liarr.getattribute ("thumb"); Liarr.style.backgroundimage= ' url (' +imgsrc+ ') ';
}
The third step, you can do
the slide switch
1.
definition of two global variables
var
Timerarr= [];//storage timer data, each slide the timer object for various animations
var
currentsolid = 0;//The currently displayed slide, starting from 0
2.
How to display the first few slide calls
//Show the number of slides, num is the displayed slide numbers, calculated from 0
function current (num) {
Hide (); Hide all the slides first
Cleartimer (); Empty all previous timers
liarr[num].style.display= "Block"; The slide that's going to show up .
Above, the implementation of the display of a large background image switch, but there are other things besides this, and, there is a dynamic effect, how to do?
Key analysis: Dynamic, the other is the beginning is a style, and ultimately another style, and then, in the style of the change process, coupled with the transition effect can be
The final style, which has been defined by class, only needs to be set, and the starting style of the child elements in each slide is good, that is, how to set it up?
By adding properties to the label
var Childarr = liarr[num].getelementsbytagname ("div");
for (var i =0; i<childarr.length;i++) {
ChildArr.style.top = Childarr.getattribute ("data-y") + "px"; Sets the start position of the element in the element in which the property gets
ChildArr.style.left = Childarr.getattribute ("data-x") + "px"; Sets the starting position of the element, which is obtained in the attributes of the element
//NOTE: Here a lot of values, derived from the attributes of the element, so, in the HTML code, there will be some additions, plus the required data, detailed view after the HTML modified
childArr.style.opacity = 0;
var startTime =childarr.getattribute ("Data-start");//Start time, also set in attribute
Note: This
setTimeout implements the pass parameter , details reference:http://bugshouji.com/shareweb/t84-1
var timer =settimeout (Annimal (Childarr), parseint (StartTime));
//Add timer, add specified method when specified, only once
Timerarr.push (timer); Put the timer in the array
}
}
Ways to perform animation effects
function Annimal (ele) {
return function () {///return a functions, let settimeout execute
var speed = Ele.getattribute ("Data-speed")/1000; Get dynamic time, get in element attribute
Ele.style.transition = "All" +speed+ "s linear"; Add transition effects
ele.style.opacity = 1;
Ele.style.top= "";
Ele.style.left= "";
//Note, the above two empties, not simply empty the values in the style, because the style is the inline style, when specified it takes precedence over class,
The style is applied, and we empty the value set in the style, and the value set in the class is applied.
This is a bright spot, with the style property set to reach two different styles of apps
}
}
Hide all the slides
function Hide () {
for (Var i=0;i<liarr.length;i++) {
Liarr.style.display= "None";
}
}
Empty all previous timers
function Cleartimer () {
for (Var i=0;i<timerarr.length;i++) {
Cleartimeout (Timerarr);
}
timerarr.length=0;
}
Because, the above method, you need to set some related properties in HTML, so the
following changes are made to HTML :
<li thumb= "Img/wide1.jpg" >
<div class= "Li1sub1" data-x= " -100" data-y= "" "data-speed=" "" data-start= "" > </div>
<div class= "li1sub2" data-x= "" "data-y=" -50 "data-speed=" "" data-start= "" ></div>
<div class= "Li1sub3" data-x= "the" data-y= " -50" data-speed= "" "data-start=" ["] >my name is Doubleyong</div >
<div class= "Li1sub4" data-x= "" "data-y=" -50 "data-speed=" "", data-start= "><a href=" "#" >purcharse </a> </div>
</li>
<span "=" "Color: #548dd4 =" "> (How many, how many items, the contents can also be set multiple, note: button The corresponding requirements to specify the starting position; JS code can not be modified, just need to add the corresponding elements in the HTML.
<li thumb= "img/wide1.jpg" >
<div class= "Li1sub1" data-x= " -100" data-y= "" "data-speed=" "" data-start= "" > </div>
<div class= "li1sub2" data-x= "" "data-y=" -50 "data-speed=" "" data-start= "" ></div>
<div class= "Li1sub3" data-x= "the" data-y= " -50" data-speed= "" "data-start=" ["] >my name is Doubleyong</div >
<div class= "Li1sub4" data-x= "" "data-y=" -50 "data-speed=" "", data-start= "><a href=" "#" >purcharse </a> </div>
</li>
<li thumb= "Img/wide2.jpg" >
<div class= "Li1sub1" data-x= " -100" data-y= "" data-speed= "" "data-start=" "></div>
<div class= "li1sub2" data-x= "" "data-y=" -50 "data-speed=" "" data-start= "" ></div>
<div class= "li1sub3" data-x= "" "data-y=" -50 "data-speed=" data-start= "> Wow, the dynamic effect came out, good fun </div>
<div class= "Li1sub4" data-x= "" "data-y=" -50 "data-speed=" ", data-start=" ><a href= "" # "> Happy </a > </div>
</li>
<li thumb= "Img/wide3.jpg" >
<div class= "Li1sub1" data-x= " -100" data-y= "" "data-speed=" "" data-start= "" > </div>
<div class= "Li1sub2" data-x= "data-y=" -50 "data-speed=" "data-start=" "></div>
<div class= "li1sub3" data-x= "" "data-y=" -50 "data-speed=" "" data-start= "[] >bang Bang bang</div>
<div class= "Li1sub4" data-x= "" data-y= " -50" data-speed= "" "data-start=" "" ><a href= "#" > Hi, Get up </a > </div>
</li> pick from: http://www.bugshouji.com/zhuopingweb/t85
JS Multi-Animation Carousel effect
