jquery realizes the _jquery of the image carousel of the Roadside light box advertisement

Special Effects Introduction

This picture slide is like roadside light box advertisement, roadside big billboard effect, led switch effect, and will keep at the lowest end of the page.

Demo diagram

How to use

1. Introduction of STYLE.CSS in Head area.

Copy Code code as follows:

<link rel= "stylesheet" href= "Css/style.css" type= "Text/css" charset= "Utf-8"/>

2, the HTML code on the </body> above:

<div class= "Palmtrees" ></div> <div class= "powerline" ></div> <div class= "City" ></ div> <div class= "container" > <div class= "ad" > <div id= "ad_1" class= "Ad_1" >         "  "  "    
      
      
        </div> <div id= "ad_2" class= "Ad_2" > < IMG class= "slice_1" src= "ads/ad2_slice01.jpg"/>  <im G class= "Slice_3" src= "ads/ad2_slice03.jpg"/>                    </div> </div> </div> <div class= "BillboarD "></div>

 

Note: Because one of the pictures that you switch is actually composed of 22 35*340 pictures. So, if you want to change the picture, you have to cut the picture into a series of 35*340 pictures, and then write the following format in sequence:

<div id= "Ad_n" class= "Ad_n" >                       &

 Lt;/div>

3, JS code placed at the bottom of the document:

<script src= "Jquery/jquery-1.8.3.min.js" type= "Text/javascript" ></script>
<script>
$ ( function () {      
 $ (' #ad_1 > img '). each (function (i,e) {
 Rotate ($ (this), 500,3000,i);
});
function Rotate (elem1,speed,timeout,i) {
 elem1.animate {' marginleft ': ' 18px ', ' width ': ' 0px '},speed,function () {
   var other;
   if (Elem1.parent (). attr (' id ') = = ' Ad_1 ') Other
     = $ (' #ad_2 '). Children (' img ')-eq (i);
   else
     = $ (' #ad_1 '). Children (' img '). EQ (i);
     Other.animate ({' marginleft ': ' 0px ', ' width ': ' 35px '},speed,function () {
     var f = function () {Rotate (other,speed, Timeout,i)};
     SetTimeout (f,timeout);
   });
}
;}); </script>

Special Effects Download Effect Demo

The above is the entire content of this article, I hope you can enjoy.