自适应PC端幻灯片样式
banner.html
<!--幻灯片大图开始-->
<div id="slideBox" class="slideBox1">
<div class="bd">
<ul>
{eyou:adv pid='1'}
<li><a href="{$field.links}"><img src="{$field.litpic}"/></a></li>
{/eyou:adv}
</ul>
</div>
<div class="hd">
<ul>
{eyou:adv pid='1'}
<li></li>
{/eyou:adv}
</ul>
</div>
</div>
<script src="{eyou:global name='web_templets_pc' /}/skin/js/banner.js"></script>
<!--幻灯片大图结束-->
banner.css
/* 幻灯切换 */
.slideBox1 {
position: relative;
display: block;
/* width: 100%; */
/* height: 440px; */
overflow: hidden;
}
.slideBox1 .bd img {
display: block;
margin: 0 auto;
/* height: 440px; */
width: 100%;
}
.slideBox1 .prev {
display: none;
position: absolute;
padding: 0;
left: 50%;
margin-left: -595px;
top: 57%;
margin-top: -60px;
width: 30px;
height: 60px;
background: url(../images/arrow_left.png) no-repeat left center;
background-position: 0 0;
}
.slideBox1 .next {
display: none;
position: absolute;
padding: 0;
right: 50%;
margin-right: -595px;
top: 57%;
margin-top: -60px;
width: 30px;
height: 60px;
background: url(../images/arrow_right.png) no-repeat left center;
background-position: right center;
}
.slideBox1 .prev:hover, .slideBox1 .next:hover {
opacity: .7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
-khtml-opacity: .7;
}
.slideBox1 .hd {
position: relative;
z-index: 1;
}
.slideBox1 .hd ul {
text-align: center;
margin-top: -25px;
}
.slideBox1 .hd ul li {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin: 0 3px;
cursor: pointer;
background: #333;
}
.slideBox1 .hd ul li.on {
background: #d81e06;
}
/* 幻灯切换 */
.slideBox2 {
position: relative;
display: block;
width: 100%;
height: 220px;
overflow: hidden;
}
.slideBox2 .bd img {
display: block;
margin: 0 auto;
height: 220px;
}
.slideBox2 .prev {
display: none;
position: absolute;
padding: 0;
left: 50%;
margin-left: -595px;
top: 64%;
margin-top: -60px;
width: 30px;
height: 60px;
background: url(../images/arrow_left.png) no-repeat left center;
background-position: 0 0;
}
.slideBox2 .next {
display: none;
position: absolute;
padding: 0;
right: 50%;
margin-right: -595px;
top: 64%;
margin-top: -60px;
width: 30px;
height: 60px;
background: url(../images/arrow_right.png) no-repeat left center;
background-position: right center;
}
.slideBox2 .prev:hover, .slideBox2 .next:hover {
opacity: .7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
-khtml-opacity: .7;
}
.slideBox2 .hd {
position: relative;
z-index: 1;
}
.slideBox2 .hd ul {
text-align: center;
margin-top: -25px;
}
.slideBox2 .hd ul li {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin: 0 3px;
cursor: pointer;
background: #333;
}
.slideBox2 .hd ul li.on {
background: #ff9700;
}
banner.js
/* 幻灯动画 */
jQuery("#slideBox").slide({
mainCell: ".bd ul",
interTime: 5000,
autoPlay: true
});
jQuery("#slideBox").hover(function() {
$(this).find(".prev").stop(true, true).fadeIn(500);
$(this).find(".next").stop(true, true).fadeIn(500);
},
function(){
$(this).find(".prev").fadeOut(500);
$(this).find(".next").fadeOut(500);
});