註:介紹壹個jquery.js，放五張圖片(1.jpg，0.jpg，0.jpg，0.jpg，0.jpg)進去。
& lt！DOCTYPE？html？公共？“-//W3C//DTD？XHTML？1.0?過渡//EN”？"/skin/js/jquery . js " & gt；& lt/script & gt；
& lt劇本？type = " text/JavaScript " & gt；
$(function()？{
var？斯威特。=?$("#focus ")。width()；？//獲取焦點圖的寬度(顯示區域)。
var？萊恩。=?$(" #焦點？ul？李”)。長度；？//獲取焦點圖像的數量
var？指數？=?0;
var？picTimer
//下面的代碼添加了壹個數字按鈕和按鈕後面的半透明條，以及上壹頁和下壹頁兩個按鈕。
var？btn？=?“& ltdiv？class='btnBg'>。& lt/div & gt；& ltdiv？class='btn ' >；
for(var？I = 0；？我？& lt？len？i++)？{
btn？+=?“& ltspan & gt& lt/span >；；
}
$("#focus ")。追加(BTN)；
$(" #焦點？。btnBg”)。css("不透明度"，0.5)；
//為小按鈕添加鼠標滑入事件，顯示相應的內容。
$(" #焦點？。btn？span”)。css("不透明度"，0.4)。mouseover(function()？{
指數？=?$(" #焦點？。btn？span”)。指數(這個)；
showPics(索引)；
}).等式(0)。觸發器(" mouse over ")；
//上壹個和下壹個按鈕透明度處理
$(" #焦點？。posNext”)。css("不透明度"，0.2)。hover(函數()？{
$(這個)。停止(對，錯)。animate({“opacity”:“0.5”}，300)；
}，函數()？{
$(這個)。停止(對，錯)。animate({“opacity”:“0.2”}，300)；
});
//後退按鈕
$(" #焦點？。pre”)。點擊(函數()？{
指數？-=?1;
如果(索引？==?-1)?{索引？=?萊恩。-?1;}
showPics(索引)；
});
//下壹步按鈕
$(" #焦點？。pos”)。點擊(函數()？{
指數？+=?1;
如果(索引？==?len)？{索引？=?0;}
showPics(索引)；
});
//本例是左右滾動，即同壹行所有li元素向左浮動，所以這裏需要計算外圍ul元素的寬度。
$(" #焦點？ul”)。css("width "，sWidth？*?(len))；
//鼠標在焦點圖上滑動時自動停止播放，滑出時自動開始播放。
$("#focus ")。hover(函數()？{
clear interval(picTimer)；
}，函數()？{
picTimer？=?setInterval(function()？{
showPics(索引)；
index++；
如果(索引？==?len)？{索引？=?0;}
},4000);？//這個4000代表自動播放的間隔，單位是毫秒。
}).觸發器(“鼠標離開”)；
//顯示圖片功能，根據接收到的索引值顯示相應的內容。
功能？showPics(索引)？{?//正常切換
var？現在向左？=?-索引*寬度；？//根據索引值計算ul元素的左值。
$(" #焦點？ul”)。停止(對，錯)。animate({"left":nowLeft}，300)；？//通過animate()調整ul元素滾動到計算的位置
$(" #焦點？。btn？span”)。removeClass("on ")。eq(指數)。addClass(" on ")；？//切換到當前按鈕的選定效果。
$(" #焦點？。btn？span”)。停止(對，錯)。動畫({"opacity":"0.4"}，300)。eq(指數)。停止(對，錯)。animate({“opacity”:“1”}，300)；？//切換到當前按鈕的選定效果。
}
});
& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv？class="wrapper " >
& lth 1 & gt；Jquery圖片滾動模仿QQ商城左右鍵控制焦點圖片切換滾動
& ltdiv？id = " focus " & gt
& ltul & gt
& lt李& gt& lt答？href="# "？target="_blank " >& ltimg？src="images/01.jpg "？Alt="QQ商城焦點圖效果下載"？/& gt；& lt/a & gt；& lt/李& gt
& lt李& gt& lt答？href="# "？target="_blank " >& ltimg？src="images/02.jpg "？Alt="QQ商城焦點圖效果教程"？/& gt；& lt/a & gt；& lt/李& gt
& lt李& gt& lt答？href="# "？target="_blank " >& ltimg？src="images/03.jpg "？Alt="jquery商城焦點圖效果"？/& gt；& lt/a & gt；& lt/李& gt
& lt李& gt& lt答？href="# "？target="_blank " >& ltimg？src="images/04.jpg "？Alt="jquery商城焦點圖代碼"？/& gt；& lt/a & gt；& lt/李& gt
& lt李& gt& lt答？href="# "？target="_blank " >& ltimg？src="images/05.jpg "？Alt="jquery商城焦點圖源代碼"？/& gt；& lt/a & gt；& lt/李& gt
& lt/ul & gt；
& lt/div & gt；& lt！-專註？end->；
& lt/div & gt；& lt！- ?包裝紙？結束？-& gt；
& lt/body & gt；
& lt/html & gt；望采納，謝謝！