首頁 > 網頁特效 > jQuery幻燈 > 仿QQ商城焦點圖jquery幻燈特效代碼

仿QQ商城焦點圖jquery幻燈特效代碼

時間:2012-03-11    來源:54173BLOG

焦點圖花樣繁多,最普通的就是圖片加下面一排數字按鈕了。這樣的在前面已經做過幾個,再有的變化就只是樣式上的,結構和實現方法沒有大的不同,就不浪費各位看客的時間了。以后也盡量會找一些新鮮、不常見的效果來仿。比如今天的QQ商城焦點圖,它包含的“上一頁”、“下一頁”兩個功能按鈕,在之前是沒有做過的,我們一起來看一下。

jquery QQ商城焦點圖效果

可以看到,除了“上一頁”、“下一頁”按鈕外,其它均和以前的實例相仿,所以結構還是我們的“焦點圖萬能結構”,按鈕就交給jQuery來完成。

HTML結構

//出鏡率很高的簡單結構,“焦點圖萬能結構”有木有
<div id="focus">
<ul>
 <li><a href="#"><img src="01.jpg" alt="01" /></a></li>
 <li><a href="#"><img src="02.jpg" alt="02" /></a></li>
 <li><a href="#"><img src="03.jpg" alt="03" /></a></li>
 <li><a href="#"><img src="04.jpg" alt="04" /></a></li>
 <li><a href="#"><img src="05.jpg" alt="05" /></a></li>
</ul>
</div>

jQuery代碼

btn += "<div class='preNext pre'></div><div class='preNext next'></div>"; //btn是之前實例中定義過的,在這里追加倆按鈕
//上一頁、下一頁按鈕透明度處理
 $("#focus .preNext").css("opacity",0.2).hover(function() {
 $(this).stop(true,false).animate({"opacity":"0.5"},300); //鼠標移入透明度變為0.5
 },function() {
 $(this).stop(true,false).animate({"opacity":"0.2"},300); //鼠標移入透明度變為0.2
 });
//上一頁按鈕
$("#focus .pre").click(function() {
 index -= 1; //下一頁按鈕,鼠標點擊后先讓index值加1
 if(index == -1) {index = len - 1;} //如果index-1后的值為-1,說明當前圖片index是0,即第一張圖片,那么接下來就該顯示最后一張圖片,即index值為len-1
 showPics(index); //根據索引值顯示相應圖片,下同
});
//下一頁按鈕
$("#focus .next").click(function() {
 index += 1; //上一頁按鈕,鼠標點擊后先讓index值減1
 if(index == len) {index = 0;} //如果index+1后的值為圖片個數,說明當前圖片index是len,即最后一張圖片,那么接下來就該顯示第一張圖片,即index值為0
 showPics(index);
});

這里只有增加的兩個按鈕的相關代碼,其它部分和以前實例相同,這里也不再列出,完整代碼可以查看演示頁源文件。

焦點圖常用的也就這幾種形式了,結構和實現方法貼得比較乏味,以后差不多的例子就直接上演示頁不解釋……

作者/來源:54173BLOG

特效推薦

熱門特效

北京pk10走势图下载 北京快乐8软件 星力彩金捕鱼 股票融资的缺点 北京pk10技巧规律后5码 捕鱼达人2修改 陕西麻将玩法 四时快乐12任5最大遗漏 微影招代理赚钱模式曝光吧 吉林快3走势图app pk10精准计划软件手机苹果版 博公司乐放6fu 时时彩极速赛车技巧