三维效果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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三维效果jquery图片轮播特效</title>
<link rel="stylesheet" type="text/css" href="css/green.css" />
<link rel="stylesheet" type="text/css" href="css/highlight.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/hoveraccordion.js"></script>
<script type="text/javascript" src="js/weisay.js"></script>
<script type="text/javascript" src="js/lazyload.js"></script>
</head>
<body>
<div id="page">
  <div id="content">
    <div class="main"> 
      <div id="box">
        <div id="container">
          <div class="item">
          <img src="images/1.jpg" width="495" height="228" />
          </div>
		  
          <div class="clear"></div>
          <div class="item">
          <img src="images/2.jpg" width="495" height="228" />
          </div>
          <div class="clear"></div>
          <div class="item">
            <div class="pic">
              <h2><a href="#" rel="bookmark" target="_blank" title="详细阅读 《将bat批处理文件注册成windows Service服务》">将bat批处理文件注册成windows Service服务</a></h2>
              <a href="#" rel="bookmark" target="_blank" title="将bat批处理文件注册成windows Service服务">
              <div class="thumbnail"> <img class="home-thumb" title="将bat批处理文件注册成windows Service服务" src="images/5.jpg" width="140px" height="100px" alt="将bat批处理文件注册成windows Service服务"></div>
              </a>
              <div class="con_post">最近做程序需要用到将.bat文件注册成windows Service服务需求，网上找了一下方法很多，下面介绍一下用window的 sc create 命令来做的方法
                c create MyService binPath= &#8220;C:\Program Files\restartOracle.bat
                &#8220;  type= share start= auto displayname= &#8220;AutoS...</div>
            </div>
            <div class="clear"></div>
            <div  class="txt">作者：小贝 | 发布：2013年9月22日 | 分类：<a href="#" title="查看 技术代码 中的全部文章" rel="category tag">技术代码</a> | 踩踏：403次</div>
            <div class="txt"></div>
            <div class="slider_num"><a href="#" title="《将bat批处理文件注册成windows Service服务》上的评论">4条吐槽</a></div>
          </div>
          <div class="clear"></div>
          <div class="item">
            <div class="pic">
              <h2><a href="#" rel="bookmark" target="_blank" title="详细阅读 《SQL设计与命名规范》">SQL设计与命名规范</a></h2>
              <a href="#" rel="bookmark" target="_blank" title="SQL设计与命名规范">
              <div class="thumbnail"> <img class="home-thumb" title="SQL设计与命名规范" src="images/4.jpg" width="140px" height="100px" alt="SQL设计与命名规范"></div>
              </a>
              <div class="con_post">一.设计规范：
                1.采用有意义的字段名：尽可能的把字段描述的清楚些（见名之意）；
                2.遵守数据库三范式(3NF)规定：
                A:表内的每一个值都只能被表达一次；
                B:表内的每一行都应该被唯一的标识(有唯一键)；
                C:表内不应该存储依赖于其他键的非键信息。
                3.小心保留词：要保证你的字段...</div>
            </div>
            <div class="clear"></div>
            <div  class="txt">作者：小贝 | 发布：2013年8月20日 | 分类：<a href="#" title="查看 技术代码 中的全部文章" rel="category tag">技术代码</a> | 踩踏：610次</div>
            <div class="txt"></div>
            <div class="slider_num"><a href="#" title="《SQL设计与命名规范》上的评论">8条吐槽</a></div>
          </div>
          <div class="clear"></div>
          <div class="item">
           <img src="images/3.jpg" width="495" height="228" />
          </div>
          <div class="clear"></div>
        </div>
        <div id="control"></div>
      </div>
      <script type="text/javascript" src="js/slider.js"></script>
      <div class="clear"></div>
    </div>
    <script type="text/javascript">
jQuery("#w-loading div").animate({width:"40%"});
</script>
    
    <div id="sidebar">
      <div class="widget"> </div>
      <div class="widget"> </div>
    </div>
  </div>
</div>
<script type="text/javascript">
jQuery("#w-loading div").animate({width:"60%"});
</script>
</body>
</html>

JS代码(lazyload.js):

eval(function(p,a,c,k,e,d){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--){
	d[e(c)]=k[c]||e(c)}
k=[function(e){
	return d[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1}
;
	while(c--){
	if(k[c]){
	p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('(5($){
	$.J.L=5(r){
	8 1={
	d:0,A:0,b:"h",v:"N",3:4}
;
	6(r){
	$.D(1,r)}
8 m=9;
	6("h"==1.b){
	$(1.3).p("h",5(b){
	8 C=0;
	m.t(5(){
	6(!$.k(9,1)&&!$.l(9,1)){
	$(9).z("o")}
j{
	6(C++>1.A){
	g B}
}
}
);
	8 w=$.M(m,5(f){
	g!f.e}
);
	m=$(w)}
)}
g 9.t(5(){
	8 2=9;
	$(2).c("s",$(2).c("i"));
	6("h"!=1.b||$.k(2,1)||$.l(2,1)){
	6(1.u){
	$(2).c("i",1.u)}
j{
	$(2).K("i")}
2.e=B}
j{
	2.e=x}
$(2).T("o",5(){
	6(!9.e){
	$("<V />").p("X",5(){
	$(2).Y().c("i",$(2).c("s"))[1.v](1.Z);
	2.e=x}
).c("i",$(2).c("s"))}
}
);
	6("h"!=1.b){
	$(2).p(1.b,5(b){
	6(!2.e){
	$(2).z("o")}
}
)}
}
)}
;
	$.k=5(f,1){
	6(1.3===E||1.3===4){
	8 7=$(4).F()+$(4).O()}
j{
	8 7=$(1.3).n().G+$(1.3).F()}
g 7<=$(f).n().G-1.d}
;
	$.l=5(f,1){
	6(1.3===E||1.3===4){
	8 7=$(4).I()+$(4).U()}
j{
	8 7=$(1.3).n().q+$(1.3).I()}
g 7<=$(f).n().q-1.d}
;
	$.D($.P[\':\'],{
	"Q-H-7":"$.k(a,{
	d:0,3:4}
)","R-H-7":"!$.k(a,{
	d:0,3:4}
)","S-y-7":"$.l(a,{
	d:0,3:4}
)","q-y-7":"!$.l(a,{
	d:0,3:4}
)"}
)}
)(W);
	',62,62,'|settings|self|container|window|function|if|fold|var|this||event|attr|threshold|loaded|element|return|scroll|src|else|belowthefold|rightoffold|elements|offset|appear|bind|left|options|original|each|placeholder|effect|temp|true|of|trigger|failurelimit|false|counter|extend|undefined|height|top|the|width|fn|removeAttr|lazyload|grep|show|scrollTop|expr|below|above|right|one|scrollLeft|img|jQuery|load|hide|effectspeed'.split('|'),0,{
}
))

JS代码(weisay.js):

jQuery(document).ready(function(){
	jQuery('.article h2 a').click(function(){
	jQuery(this).text('努力打开中，稍等...');
	window.location = jQuery(this).attr('href');
}
);
}
);
	// 滚屏jQuery(document).ready(function(){
	jQuery('#roll_top').click(function(){
	jQuery('html,body').animate({
	scrollTop:'0px'}
,800);
}
);
	jQuery('#ct').click(function(){
	jQuery('html,body').animate({
	scrollTop:jQuery('#comments').offset().top}
,800);
}
);
	jQuery('#fall').click(function(){
	jQuery('html,body').animate({
	scrollTop:jQuery('#footer').offset().top}
,800);
}
);
}
);
	//顶部导航下拉菜单jQuery(document).ready(function(){
	jQuery(".topnav ul li").hover(function(){
	jQuery(this).children("ul").show();
	jQuery(this).addClass("li01");
}
,function(){
	jQuery(this).children("ul").hide();
	jQuery(this).removeClass("li01");
}
);
}
);
	//侧边栏TAB效果jQuery(document).ready(function(){
	jQuery('#tab-title span').click(function(){
	jQuery(this).addClass("selected").siblings().removeClass();
	jQuery("#tab-content > ul").slideUp('1500').eq(jQuery('#tab-title span').index(this)).slideDown('1500');
}
);
}
);
	//图片渐隐jQuery(function (){
	jQuery('.thumbnail img').hover(function(){
	jQuery(this).fadeTo("fast",0.5);
}
,function(){
	jQuery(this).fadeTo("fast",1);
}
);
}
);
	//新窗口打开jQuery(document).ready(function(){
	jQuery("a[rel='external'],a[rel='external nofollow']").click(function(){
	window.open(this.href);
	return false}
)}
);
	//预加载广告function speed_ads(loader,ad){
	var ad = document.getElementById(ad),loader = document.getElementById(loader);
	if (ad && loader){
	ad.appendChild(loader);
	loader.style.display='block';
	ad.style.display='block';
}
}
window.onload=function(){
	speed_ads('adsense-loader1','adsense1');
	speed_ads('adsense-loader2','adsense2');
	speed_ads('adsense-loader3','adsense3');
}
;

CSS代码(green.css):

*{border:0;margin:0;padding:0;}
body{border-top:2px solid #a5dd00;background:#F0F0F0;color:#333;font:13px 微软雅黑,宋体,PMingLiU,Verdana,Arial,Helvetica,sans-serif;}
::selection{color:#a5dd00;background:#dcdcdc;}
::-moz-selection{color:#a5dd00;background:#dcdcdc;}
h2{font-size:19px;}
a:link,a:visited{color:#a5dd00;text-decoration:none;}
a:hover{text-decoration:underline}
.clear{clear:both;}
#page{}
#header{background:url(../images/green.gif);background-position:top center;padding-top:40px;height:109px;}
#top{width:990px;margin:0 auto;}
#top_logo{float:left;height:75px;}
.page_menu{}
.page_menu ul{list-style:none;float:left;}
.page_menu li{text-shadow:1px 1px #fff;color:#FFFFFF;float:left;padding:8px 10px 0 10px;}
.current-post-ancestor a,.current-menu-item a,.current-menu-ancestor a,.current-menu-parent a{background:#a5dd00;}
#content{width:990px;margin:0 auto;padding-top:5px;}
.main ul li{list-style:none;}
.main .post,.main .left{margin-top:18px;}
.article{float:right;width:690px;padding:10px 5px;box-shadow:0 1px 3px #aaa;border:1px solid #ddd\9;-webkit-border-radius:0px;-moz-border-radius:0px;background:white;}
.article li{list-style:none}
.articles{float:right;width:680px;border:1px #ddd solid;padding:10px;overflow:hidden;background:white;margin-top:8px;box-shadow:0 1px 3px #D4D4D4;border:1px solid #ddd/9;}
.article h2{border-bottom:2px solid #7FBA00;height:30px;margin-left:15px;margin-right:15px;}
.articles h3{font-size:15px}
.new{margin-left:2px;position:absolute}
.thumbnail_box{float:left;width:140px;height:100px;margin:17px 10px 8px 15px;_margin:17px 10px 8px 7px;padding:4px;border:1px solid #ccc;}
.thumbnail img{position:absolute;z-index:3;}
.entry_post{line-height:22px;padding-top:27px;background:white;padding-right:15px;padding-left:15px;}
/** 幻灯片 **/
li{list-style:none;}
#box{width:700px;margin:-3px auto;}
#container{position:relative;height:230px;z-index:0;}
#container .item{position:absolute;top:0;left:0;width:495px;height:228px;overflow:hidden;background:#FFF;box-shadow:0 1px 3px #D4D4D4;border:1px solid #ddd/9;z-index:1;opacity:1;}
#container .item .pic{float:left;width:210px;height:150px;display:inline;margin:10px;}
#container .item .pic a{color:#333333;}
#container .item .pic a:hover{color:#FF9900;}
#container .item .pic img{width:140px;height:100px;vertical-align:top;padding:4px;border:1px solid #CCC;margin:18px 10px 8px 10px;}
#container .item .pic h2{border-bottom:2px solid #7FBA00;width:455px;height:30px;margin-left:10px;margin-right:15px;}
#container .item .txt{font-size:12px;width:515px;overflow:hidden;height:20px;margin:14px 10px -12px 20px;}
#container .item .pic .con_post{background:white;margin:16px -250px 8px 170px;}
#control{height:20px;text-align:center;}
#control span{width:30px;height:5px;font-size:0;line-height:0;cursor:pointer;display:inline-block;background-color:#FEFEFE;border:1px solid #7FBA00;margin:13px 2px 2px;}
#control span.active{background-color:#7FBA00;border:1px solid #7FBA00;}
.slider_num{float:right;font-size:12px;background:#FF9900;padding:1px 20px 0 3px;line-height:20px;height:20px;margin:-13px 0px;}
.slider_num a:link,.comments_num a:visited{color:#FFFFFF;text-shadow:1px 0px #000000;}

CSS代码(highlight.css):

/* Main style for the table */
.dp-highlighter{font-family:"Courier New",Courier,mono;font-size:12px;background-color:#FAFAFA;border:1px solid #D1D7DC;width:99%;overflow:auto;margin:0px 0px 0px 0px;}
.dp-highlighter .bar{padding:2px;}
.dp-highlighter.collapsed .bar,.dp-highlighter.nogutter .bar{padding-left:0px;}
.dp-highlighter ol{margin:0px 0px 1px 38px;/* 1px bottom margin seems to fix occasional Firefox scrolling */
padding:2px;color:#2B91AF;}
.dp-highlighter.nogutter ol{list-style-type:none;margin-left:0px;}
.dp-highlighter ol li,.dp-highlighter .columns div{/*background-color:#fff;*/
border-left:1px solid #D1D7DC;padding-left:10px;line-height:18px;}
.dp-highlighter.nogutter ol li,.dp-highlighter.nogutter .columns div{border:0;}
.dp-highlighter .columns{color:gray;overflow:hidden;width:100%;}
.dp-highlighter .columns div{padding-bottom:5px;}
.dp-highlighter ol li.alt{/*background-color:#f8f8f8;*/
}
.dp-highlighter ol li span{color:Black;}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol{margin:0px;}
.dp-highlighter.collapsed ol li{display:none;}
/* Additional modifications when in print-view */
.dp-highlighter.printing{border:none;}
.dp-highlighter.printing .tools{display:none !important;}
.dp-highlighter.printing li{display:list-item !important;}
/* Styles for the tools */
.dp-highlighter .tools{padding:3px 8px 3px 15px;border-bottom:1px solid #2B91AF;font:9pt Verdana,Geneva,Arial,Helvetica,sans-serif;color:silver;}
.dp-highlighter.collapsed .tools{border-bottom:0;}
.dp-highlighter .tools a{font-size:9pt;color:gray;text-decoration:none;margin-right:10px;}
.dp-highlighter .tools a:hover{color:red;text-decoration:underline;}
/* About dialog styles */
.dp-about{background-color:#fff;margin:0px;padding:0px;}
.dp-about table{width:100%;height:100%;font-size:11px;font-family:Tahoma,Verdana,Arial,sans-serif !important;}
.dp-about td{padding:10px;vertical-align:top;}
.dp-about .copy{border-bottom:1px solid #ACA899;height:95%;}
.dp-about .title{color:red;font-weight:bold;}
.dp-about .para{margin:0 0 4px 0;}
.dp-about .footer{background-color:#ECEADB;border-top:1px solid #fff;text-align:right;}
.dp-about .close{font-size:11px;font-family:Tahoma,Verdana,Arial,sans-serif !important;background-color:#ECEADB;width:60px;height:22px;}
/* Language specific styles */
.dp-c{}
.dp-c .comment{color:green;}
.dp-c .string{color:blue;}
.dp-c .preprocessor{color:gray;}
.dp-c .keyword{color:blue;}
.dp-c .vars{color:#d00;}
.dp-vb{}
.dp-vb .comment{color:green;}
.dp-vb .string{color:blue;}
.dp-vb .preprocessor{color:gray;}
.dp-vb .keyword{color:blue;}
.dp-sql{}
.dp-sql .comment{color:green;}
.dp-sql .string{color:red;}
.dp-sql .keyword{color:rgb(127,0,85);}
.dp-sql .func{color:#ff1493;}
.dp-sql .op{color:blue;}
.dp-xml{}
.dp-xml .cdata{color:#ff1493;}
.dp-xml .comments{color:green;}
.dp-xml .tag{font-weight:bold;color:blue;}
.dp-xml .tag-name{color:rgb(127,0,85);font-weight:bold;}
.dp-xml .attribute{color:red;}
.dp-xml .attribute-value{color:blue;}
.dp-delphi{}
.dp-delphi .comment{color:#008200;font-style:italic;}
.dp-delphi .string{color:blue;}
.dp-delphi .number{color:blue;}
.dp-delphi .directive{color:#008284;}
.dp-delphi .keyword{font-weight:bold;color:navy;}
.dp-delphi .vars{color:#000;}
.dp-py{}
.dp-py .comment{color:green;}
.dp-py .string{color:red;}
.dp-py .docstring{color:green;}
.dp-py .keyword{color:blue;font-weight:bold;}
.dp-py .builtins{color:#ff1493;}
.dp-py .magicmethods{color:#808080;}
.dp-py .exceptions{color:brown;}
.dp-py .types{color:brown;font-style:italic;}
.dp-py .commonlibs{color:#8A2BE2;font-style:italic;}
.dp-rb{}
.dp-rb .comment{color:#c00;}
.dp-rb .string{color:#f0c;}
.dp-rb .symbol{color:#02b902;}
.dp-rb .keyword{color:#069;}
.dp-rb .variable{color:#6cf;}
.dp-css{}
.dp-css .comment{color:green;}
.dp-css .string{color:red;}
.dp-css .keyword{color:blue;}
.dp-css .colors{color:darkred;}
.dp-css .vars{color:#d00;}
.dp-j{}
.dp-j .comment{color:rgb(63,127,95);}
.dp-j .string{color:rgb(42,0,255);}
.dp-j .keyword{color:rgb(127,0,85);font-weight:bold}
.dp-j .annotation{color:#646464;}
.dp-j .number{color:#C00000;}
.dp-cpp{}
.dp-cpp .comment{color:#e00;}
.dp-cpp .string{color:red;}
.dp-cpp .preprocessor{color:#CD00CD;font-weight:bold;}
.dp-cpp .keyword{color:#5697D9;font-weight:bold;}
.dp-cpp .datatypes{color:#2E8B57;font-weight:bold;}
.dp-perl{}
.dp-perl .comment{color:green;}
.dp-perl .string{color:red;}
.dp-perl .keyword{color:rgb(127,0,85);}
.dp-perl .func{color:#ff1493;}
.dp-perl .declarations{color:blue;}
.dp-css .vars{color:#d00;}
.dp-g{}
.dp-g .comment{color:rgb(63,127,95);}
.dp-g .string{color:rgb(42,0,255);}
.dp-g .keyword{color:rgb(127,0,85);font-weight:bold}
.dp-g .type{color:rgb(0,127,0);font-weight:bold}
.dp-g .modifier{color:rgb(100,0,100);font-weight:bold}
.dp-g .constant{color:rgb(255,0,0);font-weight:bold}
.dp-g .method{color:rgb(255,96,0);font-weight:bold}
.dp-g .number{color:#C00000;}

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