Import jquery code
Copy codeThe Code is as follows:
<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
Copy codeThe Code is as follows:
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;
}