jquery轮播图-小米网效果

所属分类:媒体-幻灯片和轮播图

 61874  357  查看评论 (2)
分享到微信朋友圈
X
jquery轮播图-小米网效果 ie兼容8

实现代码

引用jquery.js 和slides.js

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slides.js"></script>

html

<div class="focus">
  <div id="xmSlide" class="xmSlide">
    <div class="xmSlide_01"></div>
    <div class="xmSlide_02"></div>
    <div class="xmSlide_03"></div>
  </div>
  <div class="btn">
    <p> <a href="http://www.17sucai.com" class="item1" target="_blank">了解小米3</a> 
        <a href="http://www.17sucai.com" class="item2" target="_blank">进入小米网</a><br>
      <span><a href="http://www.17sucai.com" target="_blank">小米手机3视频>></a></span> 
    </p>
  </div>
</div>

css

* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
a, img {
	border: 0;
	text-decoration: none;
}
body {
	font-family: "微软雅黑", "宋体", "黑体", Arial;
}
/* focus */
.xmSlide {
	background-color: #022c5e;
}
.xmSlide_01 {
	height: 639px;
	background: url(images/focus01.jpg) no-repeat center center;
}
.xmSlide_02 {
	height: 639px;
	background: url(images/focus02.jpg) no-repeat center center;
}
.xmSlide_03 {
	height: 639px;
	background: url(images/focus03.jpg) no-repeat center center;
}
.xmSlide-pagination {
	background-color: #fff;
	padding-top: 10px;
	text-align: center;
	height: 20px;
}
.xmSlide-pagination li {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 5px;
}
.xmSlide-pagination li a {
	display: inline-block;
	width: 12px;
	height: 12px;
	text-indent: -9999px;
	background-color: #ccd1d9;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	overflow: hidden;
}
.xmSlide-pagination li a.active {
	background-color: #656d78;
}
.xmSlide-control {
	overflow: hidden;
}
.btn {
	width: 950px;
	position: absolute;
	left: 50%;
	margin-left: -475px;
	top: 0;
	z-index: 9999;
}
.btn span {
	display: block;
	text-align: right;
	padding-right: 158px;
}
.btn p {
	padding: 410px 78px 0 0;
	text-align: right;
}
.btn p a {
	width: 133px;
	height: 36px;
	display: inline-block;
	margin-right: 10px;
	line-height: 36px;
	font-size: 14px;
	color: #fff;
	text-align: center;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.btn p a.item1 {
	background-color: #ff9000;
	-webkit-box-shadow: 0 2px rgba(13,47,88,.19);
	-moz-box-shadow: 0 2px rgba(13,47,88,.19);
	box-shadow: 0 2px rgba(13,47,88,.19);
}
.btn p a.item2 {
	background-color: #5e95e1;
	-webkit-box-shadow: 0 2px rgba(13,47,88,.19);
	-moz-box-shadow: 0 2px rgba(13,47,88,.19);
	box-shadow: 0 2px rgba(13,47,88,.19);
}


js 

<script type="text/javascript">
$(function(){
	$("#xmSlide").xmSlide({
		width: 950,
		height: 639,
		responsiveWidth:710,
		pagination: {
			effect: "fade"  //可换成"slide"
		},
		effect: {
			fade: {
				speed: 400
			}
		},
		play: {
			effect: "fade", //可换成"slide"
			interval: 4000,
			auto: true,
			pauseOnHover: true,
			restartDelay: 2500
		}
	});
});
</script>
相关插件-幻灯片和轮播图

jQuery轮播插件(原创轮播)

代码注释全,方便大家自行修改的轮播插件
  幻灯片和轮播图
 40205  366

jquery轮播图插件

jquery轮播图插件支持横向滚动和垂直滚动
  幻灯片和轮播图
 64549  488

jquery响应式幻灯片

jquery响应式幻灯片
  幻灯片和轮播图
 43290  353

基于swiper的两边叠加轮播图

基于swiper的两边叠加,渐渐缩小的轮播图,支持移动端
  幻灯片和轮播图
 39212  314

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    生如夏花 0
    2018/12/11 15:17:43

    想增加的话 只是增加

    <div class="xmSlide_01"></div>
    <div class="xmSlide_02"></div>
    <div class="xmSlide_03"></div>
    <div class="xmSlide_04"></div>
    <div class="xmSlide_05"></div>
    <div class="xmSlide_06"></div>

    为什么不行呢

        结束丶开始0
        2019/6/24 16:12:11
        他css只写了1,2,3啊,之后的456肯定不能用啊
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复