jquery_jquery に基づく Web サイトのスライド切り替え効果のフォーカス マップ コード

导入jquery代码

复制代代码如下:

<script><br> var carousel_images = [<br> "images/01.jpg",<br> "images/02.jpg",<br> "images/03.jpg",<br> "images/04.jpg",<br> "images/05.jpg",<br> "images/06.jpg" ",<br> "images/07.jpg"<br> ];<br><br> // 自動再生なしの例<br> $(window).load(function() {<br> $("#photo_container ").isc({<br> imgArray: carousel_images<br> }); <br> });<br><br> // 自動再生の例<br> /* $(window).load(function() {<br> $("#photo_container").isc({<br> imgArray: carousel_images,<br> autoplay: true,<br> autoplayTimer: 5000 // 5 秒。<br> }); ); */<br> </script>

样式文件css有几个必要加下个

复制代代码如下:

body {
font-family:"HelveticaNeue-ライト","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 {

幅: 960px;
高さ: 400px;
マージン: auto;
背景色: #000;
}

p {

text-align: center;
}

/*定义文字样式*/

A {FONT-SIZE: 12px;色: #000;}
A:リンク {色: #2d8931;テキスト装飾: なし;}
A: 訪問済み {COLOR: #333;テキスト装飾: なし;}
A:hover {COLOR: #333; TEXT-DECORATION:underline;}
A:active {COLOR: #333;テキスト装飾: なし;}

#swipe_nav_prev,#swipe_nav_next {
位置: 絶対;
上: 0;
左: 0;
z-index: 2000;
背景色: # ccc;
cursor: pointer;
text-align: center;
display: none;
}

#swipe_nav_prev {

background: #333 url('prev.png') リピートなし center center;

}

#swipe_nav_next {

background: #333 url('next.png') no-repeat center center;

}

.internal_swipe_container {

位置: 相対;
}

.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 {

パディング: 0;
マージン: 0;
位置: 絶対;
上: 0;
左: 0;
背景色: ピンク;
高さ: 6px;
リストスタイル: なし;
}

.counter {

float: left;
height: 6px;
background-color: #FFF;
z-index: 200;
height: 6px;
padding : 0;
マージン: 0;
}

.counter:hover {

cursor: pointer;
background-color: #ff00fc !重要;
}

.current {

背景色: #ff00fc !重要;
}