jQuery實現圖片輪播效果（仿QQ商城首頁、天貓首頁）

圖片輪播是網站中的常用功能，用於在有限的網頁空間內展示一組產品圖片或者照片，同時還有非常迷人的動畫效果。相信很多同學都在各種類型的網站上看過花樣百出的輪播效果圖，不少同學也想嘗試下自己做出來一個，但網上的代碼紕漏百出，不能學以致用，這裡我將給大家介紹兩種方式的圖片輪播實現供大家參考。

實現一

QQ商城輪播效果圖

天貓商城輪播效果圖

1.製作介面

 <div class="wrapper"><h1>仿2012QQ商城jQuery輪播圖效果</h1><div id="focus"><ul><li><a href="#"><img src="img/01.jpg" alt="" /></a></li><li><a href="#"><img src="img/02.jpg" alt="" /></a></li><li><a href="#"><img src="img/03.jpg" alt="" /></a></li><li><a href="#"><img src="img/04.jpg" alt="" /></a></li></ul></div></div>

這裡我們著重關注id為focus的div，裡面我們放了<ul><li></li></ul>，首先我們要做的就是把所有輪播圖片編排進去，其次才是對其操作。

1.1統一設定一個樣式

* {margin:0; padding:0;}body {font-size:12px;color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;}ul,li {list-style:none;}.wrapper {width:800px; margin:0 auto; padding-bottom:50px;}h1 {height:50px; line-height:50px; font-size:22px; font-weight:normal; font-family:"Microsoft YaHei",SimHei;}

1.2給輪播圖設定樣式

#focus {height:280px; width:800px;overflow:hidden;position:relative;}#focus ul {position:absolute;}#focus ul li {float:left; width:800px; height:280px; background:#000;}

由於圖片的高寬分別是280px、800px，這裡我們給div設定這個高寬應該很好理解，overflow:hidden;也好理解li經過左浮動以後長度已經遠遠超出div的width值，需要把多出的部分隱藏。

1.3給輪播圖下方的半透明橫幅設定樣式，這裡提供手動滑鼠移動切換圖片的功能

#focus div.btn {position:absolute; width:800px; height:10px; padding:5px 10px;right:0; bottom:0; text-align:right;background:#000; opacity:0.5;filter:alpha(opacity=50);}#focus div.btn span {display:inline-block; width:25px; height:10px; margin-left:5px; cursor:pointer; background:#fff;border:1px solid #A020F0;}

div.btn為下方橫幅，為半透明；div.btn span為小方框。

1.4點擊圖片左半部分、右半部分出現的箭頭指示，切換上下張圖片的效果樣式

#focus div.preNext {width:45px; height:100px; position:absolute; top:90px; background-image:url(../img/sprite.png); background-repeat:no-repeat;opacity:0;filter:alpha(opacity=0);cursor:pointer;}#focus div.pre {left:0;background-position:left top;}#focus div.next {right:0; background-position:right top;}#focus span.hidden {display:block;width:400px;height:260px;background:#000;opacity:0;filter:alpha(opacity=0);position:absolute;cursor:pointer;}#focus span.left {top:0;left:0;}#focus span.right {top:0;right:0;}

span.hidden這裡雖然我們定義了，但是只是為了把圖片一分為2的效果，事實上我們也是把它設為全透明的，介面上根本看不到任何效果

div.preNext 設定了箭頭指向，然後再通過圖片定位分離出來

2、製作動畫效果

由於代碼中我都有相關的注釋，這裡就不再重複的累贅，有不明白的地方可以評論或留言。再多說一句，由於圖片輪播效果用到了大量的jquery事件、動畫，以及css稍微深一點的知識，如果看起本代碼還是費力的同學可以適當的重溫下基礎。

$(function() {var sWidth = $("#focus").width(); //擷取焦點圖的寬度（顯示面積）var len = $("#focus ul li").length; //擷取焦點圖個數var index = 0;var picTimer;//以下代碼添加數字按鈕和按鈕後的半透明條，還有上一頁、下一頁兩個按鈕var btn = "<div class='btn'>";for(var i=0; i < len; i++) {btn += "<span></span>";}btn += "</div>";btn +="<div class='preNext pre'></div>"+"<div class='preNext next'></div>"+  "<span class='hidden left'></span>"+"<span class='hidden right'></span>";$("#focus").append(btn);//為小按鈕添加滑鼠滑入事件，以顯示相應的內容$("#focus div.btn span").css("opacity",0.4).mouseenter(function() {index = $("#focus div.btn span").index(this);showPics(index);});//圖片滑鼠划過$('#focus span.left').hover(function(){$('#focus div.pre').animate({opacity:'0.5'},500);},function(){$('#focus div.pre').animate({opacity:'0'},500);});$('#focus span.right').hover(function(){$('#focus div.next').animate({opacity:'0.5'},500);},function(){$('#focus div.next').animate({opacity:'0'},500);});//上一頁按鈕$("#focus span.left").click(function() {if(index == -1) {index = len - 1;}showPics(index);index--;});//下一頁按鈕$("#focus span.right").click(function() {if(index == len){index = 0;showFirstPic();}else{showPics(index);}index ++;});//本例為左右滾動，即所有li元素都是在同一排向左浮動，所以這裡需要計算出外圍ul元素的寬度$("#focus ul").css("width",sWidth * (len+1));//滑鼠滑上焦點圖時停止自動播放，滑出時開始自動播放$("#focus").hover(function() {clearInterval(picTimer);},function() {picTimer = setInterval(function() {if(index == len) { //如果索引值等於li元素個數，說明最後一張圖播放完畢，接下來要顯示第一張圖，即調用showFirPic()，然後將索引值清零index = 0;showFirstPic();} else { //如果索引值不等於li元素個數，按普通狀態切換，調用showPics()showPics(index);}index++;},2000); //此2000代表自動播放的間隔，單位：毫秒});//顯示圖片函數，根據接收的index值顯示相應的內容function showPics(index) { //普通切換var nowLeft = -index*sWidth; //根據index值計算ul元素的left值$("#focus ul").stop(true,false).animate({"left":nowLeft},500); //通過animate()調整ul元素滾動到計算出的position$("#focus div.btn span").animate({"opacity":"0.4"},300).eq(index).animate({"opacity":"1"},100); //為當前的按鈕切換到選中的效果}function showFirstPic() { //最後一張圖自動切換到第一張圖時專用$("#focus ul").append($("#focus ul li:first").clone());//為了達到從最右邊到最左邊還是往左移動效果，而不是往右移動var nowLeft = -len*sWidth; //通過li元素個數計算ul元素的left值，也就是最後一個li元素的右邊$("#focus ul").stop(true,false).animate({"left":nowLeft},500,function() {//通過callback，在動畫結束後把ul元素重新置放到起點，然後刪除最後一個複製過去的元素$("#focus ul").css("left","0");$("#focus ul li:last").remove();}); $("#focus div.btn span").animate({"opacity":"0.4"},300).eq(index).animate({"opacity":"1"},100); //為當前的按鈕切換到選中的效果}});

 天貓商城圖片輪播效果

主要代碼是一樣的，主要是介面不再是一張圖片佔用整個板塊，而是劃分好幾塊，且滑鼠移動到相關小圖片塊，顏色會變亮。
代碼下載地址
實現二 可以設定橫向豎向滾動的輪播
頁面代碼

<!DOCTYPE html><html>  <head>    <title>banner.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <link rel="stylesheet" type="text/css" href="style/banner.css">    <script type="text/javascript" src="js/jquery-1.5.2.js"></script>    <script type="text/javascript" src="js/banner.js"></script>  </head>    <body><div id="banner"><img src="img/img1.jpg" alt="輪播器第一張" /><img src="img/img2.jpg" alt="輪播器第二張" /><img src="img/img3.jpg" alt="輪播器第三張" /><img src="img/img4.jpg" alt="輪播器第四張" /><span></span><strong></strong></div>  </body></html>

頁面這裡我們只在外圍定義了一個div，裡面的span用於輪播圖下方的半透明橫幅，strong用於顯示圖片文字描述

CSS代碼

* {margin:0; padding:0;}ul,li {list-style:none;}#banner {width:750px;height:280px;margin:50px auto;position:relative;overflow:hidden;}#banner img {display:block;position:absolute;top:0;left:0;z-index:1}#banner ul {position:absolute;bottom:0px;right:50px;z-index:4;}#banner ul li {float:left;padding:0 5px;font-size:16px;color:#999;cursor:pointer;}#banner span {width:750px;height:25px;position:absolute;top:255px;left:0;background:#333;opacity:0.3;filter:alpha(opacity=30);z-index:3;}#banner strong {position:absolute;top:260px;left:10px;color:#fff;z-index:4;}

我們給img定義的樣式都層疊放在一個位置top： 0， left：0，再輪播的時候讓它上下或者左右滑動，注意一下banner的 overflow:hidden; 屬性這個樣式的同學肯定它的用意，就是隱藏溢出，不能在banner外圍看到滑動圖片。
這裡再提到一點我們給banner的div定義了一個相對定位，所以我們其他元素的定位都以絕對位置相對於banner來講。
js控制碼

$(function(){//輪播器初始化var len = $("#banner img").length; var ul = "<ul>";for(var i=0; i < len; i++){ul += "<li>●</li>";}ul += "</ul>";$(ul).appendTo($("#banner"));$('#banner img').css("opacity",0).css("filter",'alpha(opacity=' + (0*100) + ')');$('#banner img').eq(0).css("opacity",1).css("filter",'alpha(opacity=' + (1*100) + ')');$('#banner ul li').eq(0).css('color', '#333');$('#banner strong').html($('#banner img').eq(0).attr('alt'));//輪播器計數器var banner_index = 0;//輪播器的種類var banner_type = 2; //1表示左右，2表示上下滾動//自動輪播器var banner_timer = setInterval(banner_fn, 4000);//手動輪播器$('#banner ul li').hover(function () {clearInterval(banner_timer);if ($(this).css('color') != 'rgb(51, 51, 51)' && $(this).css('color') != '#333') {banner(this, banner_index == 0 ? $('#banner ul li').size() - 1 : banner_index - 1);}}, function () {banner_index = $(this).index() + 1;banner_timer = setInterval(banner_fn, 3000);});function banner(obj, prev) {$('#banner ul li').css('color', '#999');$(obj).css('color', '#333');$('#banner strong').html($('#banner img').eq($(obj).index()).attr('alt'));if (banner_type == 1) {$('#banner img').eq(prev).animate({opacity : '0',left:"-900px"},1500).css('z-index', 1);$('#banner img').eq($(obj).index()).animate({opacity : '1',left:"0"},1500).css('z-index', 2);}else if (banner_type == 2) {$('#banner img').eq(prev).animate({opacity : '0',top : '150px'},1500).css('z-index', 1);$('#banner img').eq($(obj).index()).animate({opacity : '1',top : '0'},1500).css('z-index', 2);}}function banner_fn() {if (banner_index >= $('#banner ul li').size()) banner_index = 0;banner($('#banner ul li').eq(banner_index), banner_index == 0 ? $('#banner ul li').size() - 1 : banner_index - 1);banner_index++;}});

這段代碼其實我們主要應該看banner方法，它的兩個參數分別是當前圖片對象，上一個圖片對象，並操作它的定位以及透明度直至消失。
總結：關於圖片輪播，相信它的實現方式肯定不止上述的兩個，但總歸一點，無論何種方式都需要一定的css功底，以及熟練的js應用能力。