jquery+html5自适应网站焦点图特效代码

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

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

以下是 jquery+html5自适应网站焦点图特效代码的示例演示效果:

当前平台(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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery+html5自适应网站焦点图</title> 
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
</style>

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/html5zoo.js"></script>
<script src="js/lovelygallery.js"></script>

</head>
<body>

<!-- 轮播图 -->
<div class="pics_wrap">
	<div id="html5zoo-1">
		<ul class="html5zoo-slides" style="display:none;">
			<li><a href="#"><img src="images/001.jpg" /></a></li>
			<li><a href="#"><img src="images/002.jpg" /></a></li>
			<li><a href="#"><img src="images/003.jpg" /></a></li>
			<li><a href="#"><img src="images/004.jpg" /></a></li>
			<li><a href="#"><img src="images/005.jpg" /></a></li>
		</ul>
	</div>
</div>
<!-- 轮播图结束 -->
</body>
</html>

JS代码(lovelygallery.js):

jQuery(document).ready(function(){
	var scripts = document.getElementsByTagName("script");
	var jsFolder = "";
	for (var i= 0;
	i< scripts.length;
	i++){
	if( scripts[i].src && scripts[i].src.match(/lovelygallery\.js/i)) jsFolder = scripts[i].src.substr(0,scripts[i].src.lastIndexOf("/") + 1);
}
var win_width = $(window).width();
	jQuery("#html5zoo-1").html5zoo({
	jsfolder:jsFolder,width:win_width,height:450,skinsfoldername:"",loadimageondemand:false,isresponsive:false,autoplayvideo:false,pauseonmouseover:true,addmargin:true,randomplay:false,slideinterval:5000,// 控制时间 enabletouchswipe:true,transitiononfirstslide:false,loop:0,autoplay:true,navplayvideoimage:"../images/play-32-32-0.png",navpreviewheight:60,timerheight:2,shownumbering:false,skin:"Frontpage",navshowplaypause:true,navshowplayvideo:true,navshowplaypausestandalonemarginx:8,navshowplaypausestandalonemarginy:8,navbuttonradius:0,navthumbnavigationarrowimageheight:32,navmarginy:-40,showshadow:false,navfeaturedarrowimagewidth:16,navpreviewwidth:120,textpositionmarginright:24,bordercolor:"#ffffff",navthumbnavigationarrowimagewidth:32,navthumbtitlehovercss:"text-decoration:underline;
	",navcolor:"#999999",arrowwidth:48,texteffecteasing:"easeOutCubic",texteffect:"fade",navspacing:12,playvideoimage:"../images/playvideo-64-64-0.png",ribbonimage:"../images/ribbon_topleft-0.png",navwidth:24,showribbon:false,arrowimage:"../images/arrows-48-48-3.png",timeropacity:0.6,navthumbnavigationarrowimage:"../images/carouselarrows-32-32-0.png",navshowplaypausestandalone:false,navpreviewbordercolor:"#ffffff",ribbonposition:"topleft",navthumbdescriptioncss:"display:block;
	position:relative;
	padding:2px 4px;
	text-align:left;
	font:normal 12px Arial,Helvetica,sans-serif;
	color:#333;
	",arrowstyle:"mouseover",navthumbtitleheight:20,textpositionmargintop:24,navswitchonmouseover:false,navarrowimage:"../images/navarrows-28-28-0.png",arrowtop:50,textstyle:"static",playvideoimageheight:64,navfonthighlightcolor:"#666666",showbackgroundimage:false,navpreviewborder:4,navopacity:0.8,shadowcolor:"#aaaaaa",navbuttonshowbgimage:true,navbuttonbgimage:"../images/navbuttonbgimage-28-28-0.png",textbgcss:"display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#333333;
	opacity:0.6;
	filter:alpha(opacity=60);
	",navdirection:"horizontal",navborder:4,bottomshadowimagewidth:110,showtimer:true,navradius:0,navshowpreview:true,navpreviewarrowheight:8,navmarginx:16,navfeaturedarrowimage:"../images/featuredarrow-16-8-0.png",navfeaturedarrowimageheight:8,navstyle:"bullets",textpositionmarginleft:24,descriptioncss:"display:block;
	position:relative;
	margin-top:4px;
	font:14px Inder,Arial,Tahoma,Helvetica,sans-serif;
	color:#fff;
	",navplaypauseimage:"../images/navplaypause-28-28-0.png",backgroundimagetop:-10,timercolor:"#ffffff",numberingformat:"%NUM/%TOTAL ",navfontsize:12,navhighlightcolor:"#333333",navimage:"../images/bullet-24-24-4.png",navheight:24,navshowplaypausestandaloneautohide:false,navbuttoncolor:"#999999",navshowarrow:true,navshowfeaturedarrow:false,titlecss:"display:block;
	position:relative;
	font:16px Inder,Arial,Tahoma,Helvetica,sans-serif;
	color:#fff;
	",ribbonimagey:0,ribbonimagex:0,navshowplaypausestandaloneposition:"bottomright",shadowsize:5,arrowhideonmouseleave:win_width,navshowplaypausestandalonewidth:28,navshowplaypausestandaloneheight:28,backgroundimagewidth:120,textautohide:true,navthumbtitlewidth:120,navpreviewposition:"top",playvideoimagewidth:64,arrowheight:48,arrowmargin:0,texteffectduration:win_width,bottomshadowimage:"../images/bottomshadow-110-100-5.png",border:0,timerposition:"bottom",navfontcolor:"#333333",navthumbnavigationstyle:"arrow",borderradius:0,navbuttonhighlightcolor:"#333333",textpositionstatic:"bottom",navthumbstyle:"imageonly",textcss:"display:block;
	padding:12px;
	text-align:left;
	",navbordercolor:"#ffffff",navpreviewarrowimage:"../images/previewarrow-16-8-0.png",showbottomshadow:false,textpositionmarginstatic:0,backgroundimage:"",navposition:"bottom",navpreviewarrowwidth:16,bottomshadowimagetop:100,textpositiondynamic:"bottomleft",navshowbuttons:false,navthumbtitlecss:"display:block;
	position:relative;
	padding:2px 4px;
	text-align:left;
	font:bold 14px Arial,Helvetica,sans-serif;
	color:#333;
	",textpositionmarginbottom:24,ribbonmarginy:0,ribbonmarginx:0,slide:{
	duration:win_width,easing:"easeOutCubic",checked:true}
,crossfade:{
	duration:win_width,easing:"easeOutCubic",checked:true}
,threedhorizontal:{
	checked:true,bgcolor:"#222222",perspective:win_width,slicecount:1,duration:1500,easing:"easeOutCubic",fallback:"slice",scatter:5,perspectiveorigin:"bottom"}
,slice:{
	duration:1500,easing:"easeOutCubic",checked:true,effects:"up,down,updown",slicecount:10}
,fade:{
	duration:win_width,easing:"easeOutCubic",checked:true}
,blocks:{
	columncount:5,checked:true,rowcount:5,effects:"topleft,bottomright,top,bottom,random",duration:1500,easing:"easeOutCubic"}
,blinds:{
	duration:2000,easing:"easeOutCubic",checked:true,slicecount:3}
,shuffle:{
	duration:1500,easing:"easeOutCubic",columncount:5,checked:true,rowcount:5}
,threed:{
	checked:true,bgcolor:"#222222",perspective:win_width,slicecount:5,duration:1500,easing:"easeOutCubic",fallback:"slice",scatter:5,perspectiveorigin:"right"}
,transition:"slide,crossfade,threedhorizontal,slice,fade,blocks,blinds,shuffle,threed"}
);
}
);

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