jQuery仿苹果商品展示相册效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿苹果商品展示相册效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Apple-like Slideshow Gallery | Tutorialzine demo</title>

<link href="demo.css" type="text/css" rel="stylesheet">

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>

<!--[if lte IE 7]>
<style type="text/css">
ul li{
	display:inline;
	/*float:left;*/
}
</style>
<![endif]-->

</head>

<body>

<div id="main">
  <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="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/"><img width="920" height="400" alt="side" src="img/sample_slides/info.jpg"></a></div>
      
    </div>
    
    <div id="menu">
    
    <ul>
        <li class="fbar inact">&nbsp;</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>
    
</div>
</body></html>

JS代码(script.js):

$(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 28current++;
}
// The number of seconds that the slider will auto-advance in:var changeEvery = 10;
	var itvl = setInterval(function(){
	autoAdvance()}
,changeEvery*1000);
	/* End of customizations */
}
);

CSS代码(demo.css):

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{/* Page reset */
margin:0px;padding:0px;}
body{/* Setting default text color,background and a font stack */
color:#444444;font-size:13px;background:#f2f2f2;font-family:Arial,Helvetica,sans-serif;}
/* Gallery styles */
#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;}
/* The styles below are only necessary for the demo page */
h1{font-family:"Myriad Pro",Arial,Helvetica,sans-serif;font-size:36px;font-weight:normal;margin-bottom:15px;}
h2{font-family:"Myriad Pro",Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;position:absolute;right:0;text-transform:uppercase;top:15px;}
#main{/* The main container */
margin:15px auto;text-align:center;width:920px;position:relative;}
a,a:visited{color:#0196e3;text-decoration:none;outline:none;}
a:hover{text-decoration:underline;}
p{padding:10px;text-align:center;}

附件:下载该文件资源,减少时间成本(增值服务)