首頁 > web前端 > js教程 > 基於jquery的網站幻燈片切換效果焦點圖代碼_jquery

基於jquery的網站幻燈片切換效果焦點圖代碼_jquery

WBOY
發布: 2016-05-16 17:22:27
原創
1160 人瀏覽過

導入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",<mm /07.jpg"<BR>  ];<br><br>  // 沒有自動播放的範例<BR>  $(window).load(function() {<BR>   $("#photo_container ").isc ({<BR>    imgArray: carousel_images<BR>   }); <BR>  });<br><br>  // 自動播放範例<BR>  /* $(win(window). $("#photo_container").isc({<BR>    imgArray: carousel_images,<BR>    autoplay: true,<BR>    autoplayTimer: 5000 // 5 秒)。 <BR> </腳本><BR> <BR><BR>樣式檔css有幾個需要載入<個🎜> <P></script>

複製程式碼

程式碼如下:身體 { -family-font-familue Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
 顏色: #FFF;
 字體大小: 12px;
 背景:#000;
}
}
h1 {
 字體大小:52px; 文字對齊:居中;

}

h1,h2,h3,h4 {
 字體粗細:100;

}


#photo_container {
 寬度:960px;

 高度:400px;

 邊距:自動;
 背景顏色:#000;
}

p {
 文字對齊:居中;

}


/*定義文字樣式*/
A {FONT-SIZE: 12px;顏色:#000;}

A:連結{顏色:#2d8931;文字裝飾:無;}

A:訪問過{顏色:#333;文字裝飾:無;}
A:懸停{顏色:#333;文字裝飾:底線;}
A:活動{顏色:#333;文字裝飾:無; }


#swipe_nav_prev,#swipe_nav_next {

 位置:絕對;

 頂部:0;
 左:0;
 z 索引:2000;
 左:0;
 z 索引:2000; ;
 遊標:指針;
 文字對齊:居中;
 顯示:無;
}

#swipe_nav_prev {

 背景:#333 url('prev.png') 無重複center center;


}

#swipe_nav_next {

 背景:#333 url('next.png') 無重複center center;


}

.internal_swipe_container {

 位置:相對;

}

.trans {

 過濾器:alpha(opacity=75);

 -moz-opacity:0.75;
 -khtml-opacity: 0.75;
 不透明度: 0.75; }

.jq_swipe_image {
 背景:url('loader.gif') 無重複center center;

}

#count_container {
 內邊距:0;

 邊距:0;

 位置:絕對;
 頂部:0;
 左:0;
 頂部:0;
 左:0; 高度:6px;
 列表樣式:無;
}

.counter {

 浮動:左;

 高度:6px;
 背景顏色:#FFF;
 z 索引:200;
 高度:6px;
;
 邊距: 0;
}

.counter:hover {

 遊標:指標;

 背景顏色:#ff00fc !重要;
}

.目前 {

 背景顏色:#ff00fc !重要;

}

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板