前言：
现时大家对“淘宝广告图片jquery”可能比较重视，看官们都需要学习一些“淘宝广告图片jquery”的相关内容。那么小编同时在网上汇集了一些关于“淘宝广告图片jquery””的相关文章，希望小伙伴们能喜欢，姐妹们一起来学习一下吧！效果图
各位观众老爷大家好！
今天给大家带来的是 jQuery图片封面+详情页面。
可用于事物介绍拓展。
若想要文件版源码，请看评论区。
废话不多说，上源码！
CSS源码：
@import url('reset.css');
/* General Demo Style */
body{
background:#e4ebe9 url(../images/pattern.png) repeat top left;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
.clr{
clear:both;
}
h1, h5{
margin:15px;
font-size:44px;
color:#000;
font-family: 'Rochester', sans-serif;
text-shadow:1px 1px 1px #fff;
text-align:center;
}
h1 span, h5{
font-size:20px;
display:block;
color:#60817a;
}
/* Header Style */
.header{
height:25px;
line-height:24px;
font-size:13px;
background:#000;
opacity:0.9;
text-transform:uppercase;
z-index:4;
}
.header a{
padding:5px 10px;
letter-spacing:1px;
text-shadow:1px 1px 1px #000;
color:#ddd;
text-align:right;
}
.header a:hover{
color:#fff;
}
.header a span{
font-weight:bold;
}
.header span.right_ab{
position:absolute;
right:4px;
}
Style：
/* Circular Content Carousel Style */
.ca-container{
position:relative;
margin:25px auto 20px auto;
width:990px;
height:450px;
}
.ca-wrapper{
width:100%;
height:100%;
position:relative;
}
.ca-item{
position:relative;
float:left;
width:330px;
height:100%;
text-align:center;
}
.ca-more{
position: absolute;
bottom: 10px;
right:0px;
padding:4px 15px;
font-weight:bold;
background: #ccbda2;
text-align:center;
color: white;
font-family: "Georgia","Times New Roman",serif;
font-style:italic;
text-shadow:1px 1px 1px #897c63;
}
.ca-close{
position:absolute;
top:10px;
right:10px;
background:#fff url(../images/cross.png) no-repeat center center;
width:27px;
height:27px;
text-indent:-9000px;
outline:none;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
opacity:0.7;
}
.ca-close:hover{
opacity:1.0;
}
.ca-item-main{
padding:20px;
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
background:#fff;
overflow:hidden;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-icon{
width:233px;
height:189px;
position:relative;
margin:0 auto;
background:transparent url(../images/animal1.png) no-repeat center center;
}
.ca-item-2 .ca-icon{
background-image:url(../images/animal2.png);
}
.ca-item-3 .ca-icon{
background-image:url(../images/animal3.png);
}
.ca-item-4 .ca-icon{
background-image:url(../images/animal4.png);
}
.ca-item-5 .ca-icon{
background-image:url(../images/animal5.png);
}
.ca-item-6 .ca-icon{
background-image:url(../images/animal6.png);
}
.ca-item-7 .ca-icon{
background-image:url(../images/animal7.png);
}
.ca-item-8 .ca-icon{
background-image:url(../images/animal8.png);
}
.ca-item h3{
font-family: 'Coustard', sans-serif;
text-transform:uppercase;
font-size:30px;
color:#000;
margin-bottom:20px;
height:85px;
text-align:center;
text-shadow: 0px 1px 1px #e4ebe9;
}
.ca-item h4{
font-family: "Georgia","Times New Roman",serif;
font-style:italic;
font-size:12px;
text-align:left;
border-left:10px solid #b0ccc6;
padding-left:10px;
line-height:24px;
margin:10px;
position:relative;
}
.ca-item h4 span{
text-indent:40px;
display:block;
}
.ca-item h4 span.ca-quote{
color:#f4eee3;
font-size:100px;
position:absolute;
top:20px;
left:0px;
text-indent:0px;
}
.ca-content-wrapper{
background:#b0ccc6;
position:absolute;
width:0px; /* expands to width of the wrapper minus 1 element */
height:440px;
top:5px;
text-align:left;
z-index:10000;
overflow:hidden;
}
.ca-content{
width:660px;
overflow:hidden;
}
.ca-content-text{
font-size: 14px;
font-style: italic;
font-family: "Georgia","Times New Roman",serif;
margin:10px 20px;
padding:10px 20px;
line-height:24px;
}
.ca-content-text p{
padding-bottom:5px;
}
.ca-content h6{
margin:25px 20px 0px 35px;
font-size:32px;
padding-bottom:5px;
color:#000;
font-family: 'Coustard', sans-serif;
color:#60817a;
border-bottom:2px solid #99bcb4;
text-shadow: 1px 1px 1px #99BCB4;
}
.ca-content ul{
margin:20px 35px;
height:30px;
}
.ca-content ul li{
float:left;
margin:0px 2px;
}
.ca-content ul li a{
color:#fff;
background:#000;
padding:3px 6px;
font-size:14px;
font-family: "Georgia","Times New Roman",serif;
font-style:italic;
}
.ca-content ul li a:hover{
background:#fff;
color:#000;
text-shadow:none;
}
.ca-nav span{
width:25px;
height:38px;
background:transparent url(../images/arrows.png) no-repeat top left;
position:absolute;
top:50%;
margin-top:-19px;
left:-40px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
z-index:100;
}
.ca-nav span.ca-nav-next{
background-position:top right;
left:auto;
right:-40px;
}
.ca-nav span:hover{
opacity:1.0;
}
标签： #淘宝广告图片jquery #f4html5小游戏 #html5查看图片 #jquery书籍详情模板下载 #jquery大图列表的代码
