经验分享程序开发文档资料数据资源其它资源

jQuery卡片式图片轮换代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery卡片式图片轮换代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery卡片式图片轮换代码

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=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery卡片式图片轮换代码，属于站长常用代码" />
<title>jQuery卡片式图片轮换代码</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/roundabout.js"></script>
<script type="text/javascript" src="js/roundabout_shapes.js"></script>
<script type="text/javascript" src="js/gallery_init.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/ie9.js"></script>
<![endif]-->
</head>
<body>
<!-- 代码 开始 -->
<header>
	<div class="container">
		<h1><a href="#" >Design Company</a></h1>
	  <nav>
		<ul>
		  <li><a href="#" >Home</a></li>
		  <li><a href="#"  class="current">About</a></li>
		  <li><a href="#" >Privacy</a></li>
		  <li><a href="#" >Gallery</a></li>
		  <li><a href="#" >Contact</a></li>
		  <li><a href="#" >Sitemap</a></li>
		</ul>
	  </nav>
	</div>
</header>

<section id="gallery">
	<div class="container">
		<ul id="myRoundabout">
		<li><img src="images/slide3.jpg" alt=""></li>
		<li><img src="images/slide2.jpg" alt=""></li>
		<li><img src="images/slide5.jpg" alt=""></li>
		<li><img src="images/slide1.jpg" alt=""></li>
		<li><img src="images/slide4.jpg" alt=""></li>
	  </ul>
	</div>
</section>
<!-- 代码 结束 -->
</body>
</html>

JS代码(gallery_init.js):

$(document).ready(function(){
	$('#myRoundabout').roundabout({
	shape:'figure8',minOpacity:1}
);
}
);

CSS代码(style.css):

/* Getting the new tags to behave */
article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video{display:block;}
mark,rp,rt,ruby,summary,time{display:inline}
/* Global properties ======================================================== */
body{background:#212222;font-family:Arial,Helvetica,sans-serif;font-size:100%;line-height:1.125em;color:#fff;}
html{min-width:1000px;}
html,body{height:100%;}
/* Global Structure ============================================================= */
.container{margin:0 auto;position:relative;width:1000px;font-size:.8125em;}
/* Header */
header{height:72px;overflow:hidden;background:url(../images/header-bg.gif) 0 0 repeat-x;}
/*Gallery*/
#gallery{height:496px;overflow:hidden;background:url(../images/gallerry-bg.gif) 0 0 repeat-x;}
/* Content */
#content{float:left;width:572px;}
/* Sidebar */
aside{float:left;width:302px;margin-right:52px;}
/* Footer */
footer{padding:20px 0 22px 0;border-top:5px solid #eee;}
/* Left & Right alignment */
.fleft{float:left;}
.fright{float:right;}
.clear{clear:both;}
.col-1,.col-2,.col-3{float:left;}
.alignright{text-align:right;}
.aligncenter{text-align:center;}
.wrapper{width:100%;overflow:hidden;}
/* The inside class provides consistent padding. To be used often! */
.inside{padding:32px 37px 50px 37px;}
/*----- form defaults -----*/
input,select,textarea{font-family:Arial,Helvetica,sans-serif;font-size:1em;vertical-align:middle;font-weight:normal;}
/*----- other -----*/
figure{margin-bottom:18px;}
.img-indent{margin:0 20px 0 0;float:left;}
.img-box{width:100%;overflow:hidden;padding-bottom:15px;}
.img-box figure{float:left;margin:0 20px 0 0;padding:0;}
.extra-wrap{overflow:hidden;}
p{margin-bottom:18px;}
.p1{margin-bottom:9px;}
.p2{margin-bottom:18px;}
.p3{margin-bottom:27px;}
/*----- txt,links,lines,titles -----*/
a{color:#f27f02;outline:none;}
a:hover{text-decoration:none;}
h1{font-size:34px;line-height:1.2em;color:#fff;font-weight:normal;background:url(../images/logo.jpg) no-repeat 0 0;padding:6px 0 8px 69px;position:absolute;left:39px;top:6px;}
h1 a{color:#fff;text-decoration:none;}
h2{font-size:30px;line-height:1.2em;font-weight:normal;color:#212222;margin-bottom:22px;}
h2 span{color:#8a8a8a;}
h3{font-size:1em;margin-bottom:6px;}
h3 a{color:#242424;}
h3 a:hover{text-shadow:1px 1px 1px #888;}
/*==================boxes====================*/
.main-box{border-top:5px solid #eaeaea;background:#fff;width:100%;}
.contacts{padding-bottom:20px;}
.contacts li{width:100%;overflow:hidden;}
.contacts li strong{float:left;width:95px;}
.list1{margin-left:12px;padding-bottom:18px;}
.list1 li{background:url(../images/arrow1.gif) no-repeat 0 6px;padding:0 0 0 12px;}
/*===== header =====*/
header nav{float:right;}
header nav ul li{float:left;}
header nav ul li a{font-size:22px;color:#fff;height:67px;line-height:67px;text-decoration:none;width:101px;text-align:center;float:left;background:#433b8f;background-image:gradient(top,#383282,#484095);/* FF3.6 */
background-image:-moz-linear-gradient(top,#383282,#484095);/* FF3.6 */
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#383282),color-stop(1,#484095));/* Saf4+,Chrome */
 filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282',EndColorStr='#484095');/* IE6,IE7 */
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282',EndColorStr='#484095')";/* IE8 */
}
header nav ul li a.current,header nav ul li a:hover{padding-bottom:5px;}
header nav ul li:nth-of-type(2) a{background:#0184cd;background-image:-moz-linear-gradient(top,#017bc8,#018ed3);/* FF3.6 */
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#017bc8),color-stop(1,#018ed3));/* Saf4+,Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8',EndColorStr='#018ed3');/* IE6,IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8',EndColorStr='#018ed3')";/* IE8 */
}
header nav ul li:nth-of-type(3) a{background:#7cbc19;background-image:-moz-linear-gradient(top,#73b515,#86c31d);/* FF3.6 */
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#73b515),color-stop(1,#86c31d));/* Saf4+,Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515',EndColorStr='#86c31d');/* IE6,IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515',EndColorStr='#86c31d')";/* IE8 */
}
header nav ul li:nth-of-type(4) a{background:#ffbc00;background-image:-moz-linear-gradient(top,#ffb500,#ffc300);/* FF3.6 */
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffb500),color-stop(1,#ffc300));/* Saf4+,Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500',EndColorStr='#ffc300');/* IE6,IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500',EndColorStr='#ffc300')";/* IE8 */
}
header nav ul li:nth-of-type(5) a{background:#f07502;background-image:-moz-linear-gradient(top,#ee6c01,#f27f02);/* FF3.6 */
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ee6c01),color-stop(1,#f27f02));/* Saf4+,Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01',EndColorStr='#f27f02');/* IE6,IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01',EndColorStr='#f27f02')";/* IE8 */
}
header nav ul li:nth-of-type(6) a{background:#d00110;background-image:-moz-linear-gradient(top,#d00110,#da0116);/* FF3.6 */
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d00110),color-stop(1,#da0116));/* Saf4+,Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110',EndColorStr='#da0116');/* IE6,IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110',EndColorStr='#da0116')";/* IE8 */
}
/*===== gallery =====*/
.roundabout-holder{width:850px;height:496px;margin:0 auto;}
.roundabout-moveable-item{width:646px;height:416px;cursor:pointer;border:3px solid #ccc;border:3px solid rgba(0,0,0,0.08);border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
.roundabout-moveable-item img{width:100%;}
.roundabout-in-focus{border:3px solid rgba(0,0,0,0.2);}
/*===== content =====*/
#content{}
#content img,aside img{border:3px solid #ebebeb;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
#content img:hover{border-color:#bbb;}
/*--- news list styles ---*/
.news li{overflow:hidden;position:relative;padding:0 0 26px 84px;}
.news li:last-child{padding-bottom:0;}
.news li figure{width:59px;height:59px;background:url(../images/date-bg1.gif) no-repeat 0 0;position:absolute;left:0;top:0;text-align:center;border:3px solid #ebebeb;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;font-size:10px;color:#fff;text-transform:uppercase;}
.news li figure strong{display:block;font-size:30px;line-height:1.2em;margin-bottom:-7px;padding-top:4px;}
.news li:nth-of-type(4n+2) figure{background:url(../images/date-bg2.gif) no-repeat 0 0;}
.news li:nth-of-type(4n+3) figure{background:url(../images/date-bg3.gif) no-repeat 0 0;}
.news li:nth-of-type(4n+4) figure{background:url(../images/date-bg4.gif) no-repeat 0 0;}
.team-list li{width:100%;overflow:hidden;padding-bottom:43px;}
.team-list li:last-child{padding-bottom:0;}
.team-list li figure{float:left;margin:0 20px 0 0;padding:0;}
/*--- loopedSlider styles ---*/
/* * Required*/
#loopedSlider .wrap{width:295px;height:295px;overflow:hidden;position:relative;}
#loopedSlider .slides{position:absolute;top:0;left:0;}
#loopedSlider .slides div{position:absolute;top:0;width:295px;display:none;}
/* * Optional*/
#loopedSlider{width:295px;position:relative;clear:both;}
#loopedSlider .nav-controls{width:100%;overflow:hidden;padding-top:10px;}
#loopedSlider li{display:inline;}
#loopedSlider li a.previous{float:left;}
#loopedSlider li a.next{float:right;}
/*===== footer =====*/
footer{color:#fff;}
footer .fleft{padding-left:40px;}
footer .fright{padding-right:40px;}
/*----- forms -----*/
#contacts-form{clear:right;width:100%;overflow:hidden;}
#contacts-form fieldset{border:none;float:left;}
#contacts-form .field{clear:both;}
#contacts-form label{float:left;width:110px;line-height:18px;padding-bottom:6px;font-weight:bold;}
#contacts-form input{width:205px;padding:1px 0 1px 3px;background:none;border:1px solid #e5e5e5;color:#616161;float:left}
#contacts-form input:invalid{border-color:red;}
#contacts-form textarea{width:450px;height:215px;padding:1px 0 1px 3px;background:none;border:1px solid #e5e5e5;color:#616161;margin-bottom:12px;overflow:auto;float:left;}
#contacts-form div:last-child{padding-left:110px;}
/*==========================================*/
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
552.06 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
552.06 KB
立即下载
于晶
了解
打赏作者 鼓励作者
Html JS 图片特效5
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章