一个好看的页面轮播图

HTML:

<div id=lunbo><!--轮播图片开始-->
	<div class="shutter">
<div class="shutter-img">
  <a href="#" data-shutter-title="Iron Man"><img src="images/01.jpg" alt="#"></a>
  <a href="#" data-shutter-title="Super Man"><img src="images/02.jpg" alt="#"></a>
  <a href="#" data-shutter-title="The Hulk"><img src="images/03.jpg" alt="#"></a>
   <a href="#" data-shutter-title="The your"><img src="images/04.jpg" alt="#"></a>
     <a href="#" data-shutter-title="The Five"><img src="images/05.jpg" alt="#"></a>
</div>
<ul class="shutter-btn">
  <li class="prev"></li>
  <li class="next"></li>
</ul>
<!--
<div class="shutter-desc">
  <p>Iron Man</p>
</div>
-->
</div>
</div><!--轮播图片结束-->

css:

* { margin: 0; padding: 0; }
body { background-color: #FFFFFF; }
img { border: 0; vertical-align: top; }
ul, li { list-style: none; }

.shutter {
  overflow: hidden;
  width: 498px;
  height: 196px;
  position: relative;
  border-radius: 4px;
  
}
.shutter-img {
  z-index: 1;
}
.shutter-img,
.shutter-img a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.shutter-img a {
  cursor: default;
}
.shutter-img a > img {
  width: 100%;
  height: 100%;
}
.shutter-img .created {
  overflow: hidden;
  position: absolute;
  z-index: 20;
}
.shutter-btn {}
.shutter-btn li {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 49px;
  height: 49px;
  margin-top: -25px;
  cursor: pointer;
}
.shutter-btn li.prev {
  left: 20px;
  background: url(../images/shutter_prevBtn.png) no-repeat 0 -49px;
}
.shutter-btn li.next {
  right: 20px;
  background: url(../images/shutter_nextBtn.png) no-repeat 0 -49px;
}
.shutter-desc {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 36px;
  background: url(../images/shutter_shadow.png) repeat;
}
.shutter-desc p {
  padding-left: 20px;
  line-height: 36px;
  color: #fff;
  font-size: 14px;
}

js:

	<script src="js/jquery.min.js"></script>
		<script>
		$(function () {
		  $('.shutter').shutter({
			shutterW: 498, // 容器宽度
			shutterH: 196, // 容器高度
			isAutoPlay: true, // 是否自动播放
			playInterval: 1000, // 自动播放时间
			curDisplay: 1, // 当前显示页
			fullPage: false // 是否全屏展示
		  });
		});
		</script>

猜你喜欢

转载自blog.csdn.net/qq_40383417/article/details/81295568
今日推荐