這裏的圖片輪播法是我從網上參考的方法，不過我自己也做了壹些改進。我先貼個代碼:
& lt！DOCTYPE HTML & gt
& lthtml & gt
& lthead & gt
& ltlink rel = " style sheet " type = " text/CSS " href =。/CSS/init 2 . CSS " & gt；
& ltscript type = " text/JavaScript " src = "。/js/jquery-1.11.3 . min . js " & gt；& lt/script & gt；
& ltscript type = " text/JavaScript " src = "。/js/test 2 . js " & gt；& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv id = " layout " & gt
& lt表頭？class="clearfix " >
& ltdiv id = " banner " & gt
& ltul id = " banner _ img " & gt
& lt李& gt& ltimg src= "。/img/s 1 . jpg " & gt；& lt/李& gt
& lt李& gt& ltimg src= "。/img/S2 . jpg " & gt；& lt/李& gt
& lt李& gt& ltimg src= "。/img/S3 . jpg " & gt；& lt/李& gt
& lt/ul & gt；
& lt/div & gt；
& lt/header & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；
在這個html目錄中，有三個同級文件夾，img、css、js中的圖片分別存儲這個網頁的css文件和js文件。這裏用的是jquery，記得介紹順序，jquery必須放在其他js前面。
Html代碼很簡單，不用過多解釋。
看看介紹的css，init2.css
*{
邊距:0px
填充:0px
}
#布局{
寬度:960px
邊距:0自動；
}
#橫幅{
位置:相對；
溢出:隱藏；
寬度:600px
高度:200px
邊框-半徑:10px；
邊框:2px純黑；
}
#banner_img li{
浮動:左；
list-style-type:無；
}
#索引{
位置:絕對；
右:8px
底部:8px
}
#索引李{
浮動:左；
寬度:16px；
身高:16px；
文本對齊:居中；
行高:16px；
邊框半徑:5px
邊框:1px實心# FF7300
背景:白色；
列表樣式:無；
左邊距:8px
光標:指針；
}
。clearfix:在{
內容:“”；
高度:0px
顯示:塊；
明確:兩者都有；
}
。在
{
背景:# FF7300
}
Css基本上對應了之前html中的類。claerfix用於清除浮動。on是代表輪播圖片的索引中當前播放圖片的索引。其實背景是變的。這裏的索引是後面動態添加的，html裏看不到索引。主要思想是將圖片的容器設置為overflow；隱藏；
下面是壹個比較簡單的實現，利用jquery的fadeIn和fadeOut效果實現。
//淡入淡出
var時間；
var指數= 1；
var tol num = 3；
$(function(){
& ltspan style="white-space:pre " >& lt/span>。setInterval(" showBanner("+tolnum+")，3000)；
});
函數showBanner(n)
{
& ltspan style="white-space:pre " >& lt/span>。var ul = $(" # banner _ img ")；
& ltspan style="white-space:pre " >& lt/span>。ul.children()。fadeOut(“慢”)；
& ltspan style="white-space:pre " >& lt/span>。ul.children()。eq(指數)。fadeIn(“慢”)；
& ltspan style="white-space:pre " >& lt/span>。index = index+1 & gt；n-1？0:索引+1；
}
嗯，不知道為什麽到最後壹張圖的時候會有壹個bug不淡出。我不太明白。請給我妳的建議。
第二種方法是使用jquery的動畫來實現margin屬性的轉換。
init()；
函數init()
{
$(function(){
var指數= 0；
var adTime
var len = $("#banner_img li ")。長度；
addIndex(len)；
var banner Li = $(" # index Li ")；
//句柄索引
$(" #指標李")。mouseover(function() {
index = $("#index li ")。指數(這個)；
showImgs(索引)；
});
//toggleInterval
$("#banner ")。hover(function(){
clear interval(ad timer)；
}，function(){
ad timer = setInterval(function(){
//alert(index)；
showImgs(索引)；
index++；
if(index==len){
索引= 0；
}
},2000)
}).觸發器(' mouse leave ')；
});
}
//自動添加索引
函數添加索引(n)
{
var ul = $(" & lt；ul id = \ " index \ " & gt& lt/ul >) ;
for(var I = 1；我& lt= n；i++)
{
var Li = $(" & lt；李& gt& lt/李>) ;
li.append(function(num){
退貨數量
}(I))；
ul.append(李)；
}
ul.children()。首先()。add class(“on”)；
$("#banner_img ")。追加(ul)；
}
函數顯示(索引)
{
var ad width = $(" # banner _ img & gt；李:首先”)。width()；
$("#banner_img ")。停(真，假)；
//$("#banner_img ")。css('margin-left '，-index * ad width+" px ")；
$("#banner_img ")。動畫({
" marginLeft":-adwidth*index+"px "
},1000);
$(" #指標李")。removeClass('on ')。eq(指數)。add class(“on”)；
}
Hover()是替代mouseenter和mouseleave的方法，據說比較好用。Trigger()觸發當前對象的狀態。這裏觸發壹次mouseleave的狀態來初始化定時器，因為這裏的設置是鼠標移動到$(“# banner”)時破壞定時器，鎖定當前圖片，鼠標移動時重新添加定時器。& ltpre name = " code " class = " JavaScript " >$("#banner_img ")。動畫({
" marginLeft":-adwidth*index+"px "
},1000);
這是jquery中動畫方法的使用，通過傳入索引改變banner_img的邊距，這裏是margin-left，所以圖片會從右向左刷(需要浮動)，如果需要從下往上刷，只需設置margin-top，我發現在js中動態添加邊距並不能觸發css的轉場。