使用jQuery仿蘋果官網(wǎng)焦點圖特效
這次我們要分享的這款jQuery焦點圖非常特別,它的外觀特別簡單,但是又相當大氣。焦點圖的整體樣式是仿蘋果樣式的,由于jQuery的運用,我們只要點擊圖片下方的縮略圖即可達到圖片切換的焦點圖特效,這款jQuery焦點圖插件非常適合在產(chǎn)片展示的網(wǎng)頁上使用。
接下來我們一起分享一下實現(xiàn)這款蘋果焦點圖的過程及源碼。
HTML代碼:
<div id="gallery">
<div id="slides" style="width: 3680px; margin-left: 0px;">
<div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/macbook.jpg"></div>
<div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/iphone.jpg"></div>
<div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/imac.jpg"></div>
<div class="slide"><a target="_blank" href=" width="920" height="400" alt="side" src="img/sample_slides/info.jpg"></a></div>
</div>
<div id="menu">
<ul>
<li class="fbar inact"> </li><li class="menuItem inact act"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_macbook.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_iphone.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_imac.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_about.png"></a></li>
</ul>
</div>
</div>
從以上HTML代碼可以看出,整個焦點圖由一些div構(gòu)成圖片容器,用ul li列表構(gòu)成下面的縮略圖。
CSS代碼:
#gallery{
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url(img/panel.jpg) repeat-x bottom center #ffffff;
/* The width of the gallery */
width:920px;
overflow:hidden;
}
#slides{
/* This is the slide area */
height:400px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:920px;
overflow:hidden;
}
.slide{
float:left;
}
#menu{
/* This is the container for the thumbnails */
height:45px;
}
ul{
margin:0px;
padding:0px;
}
li{
/* Every thumbnail is a li element */
width:60px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
}
li.inact:hover{
/* The inactive state, highlighted on mouse over */
background:url(img/pic_bg.png) repeat;
}
li.act,li.act:hover{
/* The active state of the thumb */
background:url(img/active_bg.png) no-repeat;
}
li.act a{
cursor:default;
}
.fbar{
/* The left-most vertical bar, next to the first thumbnail */
width:2px;
background:url(img/divider.png) no-repeat right;
}
li a{
display:block;
background:url(img/divider.png) no-repeat right;
height:35px;
padding-top:10px;
}
a img{
border:none;
}
CSS代碼也非常簡單,都是一些簡單設置而已。
jQuery代碼:
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Traverse through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#menu ul li a').click(function(e,keepScroll){
/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) clearInterval(itvl);
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
/*****
*
* Enabling auto-advance.
*
****/
var current=1;
function autoAdvance()
{
if(current==-1) return false;
$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 10;
var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
/* End of customizations */
});
這是焦點圖的重點,完成了圖片滑塊的動畫邏輯,點擊縮略圖即可切換圖片。
相關(guān)文章
jquery中map函數(shù)遍歷數(shù)組用法實例
這篇文章主要介紹了jquery中map函數(shù)遍歷數(shù)組用法,實例分析了jQuery中map函數(shù)遍歷數(shù)組的相關(guān)技巧,并提供了一個自定義遍歷數(shù)組函數(shù)供參考之用,需要的朋友可以參考下2015-05-05基于Jquery實現(xiàn)表格動態(tài)分頁實現(xiàn)代碼
項目中經(jīng)常會對表格進行分頁,以下運用jquery對用戶管理中的用戶表格進行分頁。2011-06-06jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果示例
這篇文章主要介紹了jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果,涉及jQuery結(jié)合時間函數(shù)動態(tài)設置元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-12-12使用jQuery Rotare實現(xiàn)微信大轉(zhuǎn)盤抽獎功能
本文主要介紹使用jQuery Rotare實現(xiàn)微信大轉(zhuǎn)盤抽獎功能,并附實例講解,非常實用,有需要的朋友可以參考一下。2016-06-06jQuery插件formValidator自定義函數(shù)擴展功能實例詳解
這篇文章主要介紹了jQuery插件formValidator自定義函數(shù)擴展功能,結(jié)合實例形式分析了jQuery插件formValidator常見的各種判定與驗證技巧,非常簡單實用,需要的朋友可以參考下2015-11-11