JavaScript achieves special effects on carousel images with titles, and javascript titles
Image carousel, which is widely used on some shopping websites, is described below.
CSS code:
<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:
<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>
JS Code:
<Script type = "text/javascript"> // JavaScript Document // defines the global variable var title = new Array (); title [0] = "1. the first wave of flash sales during the celebration was three crazy days! "; Title [1] =" 2. 10-year sales promotion session: 39/99/169! "; Title [2] =" 3. a discount for the entire audience! "; Title [3] =" 4. the store opened a-fold cap for a large number of books "; var NowFrame = 1; // the first image var MaxFrame = 4; // a total of five images function show (d1) {if (Number (d1) {clearTimeout (theTimer); // when a button is triggered, the NowFrame = d1 timer is cleared; // 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]; // displays the title document for the current image. 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) {// set 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.