JQ website slide switching effect focus chart code

This article provides you with an atmospheric jQ website slide switching effect focus chart code. If you need to learn more, you can refer to it.

The focus chart of this jQuery website slide switching effect is very atmospheric. If this effect is applied on the homepage of the website, it must be a great deal!

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 export usel_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>

Several Style File css files need to be loaded

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 styles */ 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;   } # Swipe_nav_next { Background: #333 url('next.png ') no-repeat 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;   } # 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; }