【jq】自适应PC端幻灯片样式

自适应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);
});