JQuery achieves the carousel Effect of imitation roadside lightbox advertisement images, jquery roadside

JQuery achieves the carousel Effect of imitation roadside lightbox advertisement images, jquery roadside

Special effects

This picture is like a lightbox advertisement on the side of the road, a large billboard effect on the side of the road, LED switching effect, and will remain at the lowest end of the page.

Demo Diagram

Usage

1、is introduced to style.css in headers.

Copy codeThe Code is as follows: <link rel = "stylesheet" href = "css/style.css" type = "text/css" charset = "UTF-8"/>

2. Place the html code on </body>:

<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">                                                                                                                 </div> </div></div><div class="billboard"></div>

Note: A switched image is actually composed of 22 35*340 images. Therefore, if you want to change the switching image, you must cut the image into 35*340 consecutive image sets and write them in the following format in sequence:

<Div id = "ad_N" class = "ad_N">                       </div>

3. Place the js Code 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     other = $('#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>

Demo of special effect download

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