Implement special effects on carousel images with titles using JavaScript

Implement special effects on carousel images with titles using JavaScript

Here we will share with you the 4-screen JavaScript image carousel code with titles and text descriptions, which is perfectly compatible with IE6. Move the cursor to the number tab to switch between images. Click an image to go to the specified page. For more information, see.

Image carousel, which is widely used on some shopping websites, is described below.

　　

CSS code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

<Style type = "text/css">   . Body { Width: 524px; Border: solid 1px #666; Margin-left: auto; Margin-right: auto; } . Bg { Background-color: # E0E0E0; Height: 20px; Border-top: solid 1px # B4B4B4; } . Number { Font-size: 14px; Font-weight: bold; Color: # FFF; Background-color: #9E2E07; Display: block; Border: 1px solid # FFF; Width: 18px; Height: 18px; Text-align: center; Margin-left: 10px; Cursor: pointer; Float: left; } . NumberOver { Color: #8C2806; Font-size: 14px; Width: 280px; Background-color: # FFF; Text-align: center; Float: left; Display: block; Margin-left: 10px; } . Main { Width: 95%; Margin-left: auto; Margin-right: auto; } . Left_indent { Padding-left: 20px; } . Red { Color: # F00; } </Style>

HTML code:

?

1 2 3 4 5 6 7 8 9

<Div class = "body"> <Div class = "bg"> <Div class = "number" id = "fig_1" onclick = "show (1);"> 1 </div> <Div class = "number" id = "fig_2" onclick = "show (2);"> 2 </div> <Div class = "number" id = "fig_3" onclick = "show (3);"> 3 </div> <Div class = "number" id = "fig_4" onclick = "show (4);"> 4 </div>   </Div> </Div>

JS Code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<Script type = "text/javascript"> // JavaScript Document // Define global variables Var title = new Array (); Title [0] = "1. The first wave of shopaholics during the sales promotion is three crazy days! "; Title [1] = "2. 10-year sales promotion session: 39/99/169! "; Title [2] = "3. off for the entire audience and enjoy great value and low price! "; Title [3] = "4. Store celebration offers a off cap for a large number of books ";   Var NowFrame = 1; // display the first image first Var MaxFrame = 4; // a total of five images Function show (d1 ){ If (Number (d1 )){ ClearTimeout (theTimer); // clears the timer when a button is triggered. NowFrame = d1; // set the currently displayed Image } For (var I = 1; I <(MaxFrame + 1); I ++ ){ If (I = NowFrame ){   Document. getElementById ("Rotator"). src = "ad-0" + I + ". jpg"; // display the current image Document. getElementById ("fig _" + I). innerHTML = title [I-1]; // display the title of the current image Document. getElementById ("fig _" + I). className = "numberOver"; // set the CSS style of the current title } Else { Document. getElementById ("fig _" + I). innerHTML = I; Document. getElementById ("fig _" + I). className = "number "; } } If (NowFrame = MaxFrame) {// sets the next image to be displayed. NowFrame = 1; } Else { NowFrame ++; } } Var theTimer = setInterval ('show () ', 3000); // sets the timer to display the next image. Window. onload = show; // run the show () function when loading the page ()   </Script>

The above is all the content shared in this article. I hope you will like it.