JQ Site Slide Transition effect Focus Chart code

This jquery website slide switch effect Focus map is very atmosphere, if the homepage applies this effect, must be graced Ah!

Import jquery Code

The code is as follows

Copy Code

<script src= "Http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type= "Text/javascript" ></script> <script src= "Js/jquery-image-scale-carousel.js" type= "Text/javascript" charset= "Utf-8" ></script> <script> var carousel_images = [ "Images/01.jpg", "Images/02.jpg", "Images/03.jpg", "Images/04.jpg", "Images/05.jpg", "Images/06.jpg", "Images/07.jpg" ]; Example without AutoPlay $ (window). Load (function () { $ ("#photo_container"). ISC ({ Imgarray:carousel_images }); }); Example with AutoPlay /* $ (window). Load (function () { $ ("#photo_container"). ISC ({ Imgarray:carousel_images, Autoplay:true, autoplaytimer:5000//5 seconds. }); }); */ </script>

Style files CSS has several needs to load a

The code is as follows

Copy Code

Body { font-family: "Helveticaneue-light", "Helvetica neue Light", "Helvetica neue", Helvetica,arial,sans-serif; Color: #FFF; font-size:12px; Background: #000; } H1 { font-size:52px; Text-align:center; } H1,H2,H3,H4 { font-weight:100; } #photo_container { width:960px; height:400px; Margin:auto; Background-color: #000; } p { Text-align:center; } /* Define Text style * * A {font-size:12px; COLOR: #000;} a:link {COLOR: #2d8931; Text-decoration:none;} a:visited {COLOR: #333; Text-decoration:none;} a:hover {COLOR: #333; Text-decoration:underline;} a:active {COLOR: #333; Text-decoration:none;} #swipe_nav_prev, #swipe_nav_next { Position:absolute; top:0; left:0; z-index:2000; Background-color: #ccc; Cursor:pointer; Text-align:center; Display:none; } #swipe_nav_prev { Background: #333 url (' prev.png ') no-repeat Center Center; } #swipe_nav_next { Background: #333 url (' next.png ') no-repeat Center Center; } . internal_swipe_container { position:relative; } . trans { Filter:alpha (opacity=75); -moz-opacity:0.75; -khtml-opacity:0.75; opacity:0.75; } . jq_swipe_image { Background:url (' loader.gif ') no-repeat Center Center; } #count_container { padding:0; margin:0; Position:absolute; top:0; left:0; Background-color:pink; height:6px; List-style:none; } . counter { Float:left; height:6px; Background-color: #FFF; z-index:200; height:6px; padding:0; margin:0; } . counter:hover { Cursor:pointer; Background-color: #ff00fc!important; } . Current { Background-color: #ff00fc!important; }