jquery轮播图-小米网效果

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

 26764  48  查看评论 (0)
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>
相关插件-幻灯片和轮播图

清新简洁的HTML5幻灯片- SLIDESHOW CANVAS & JQUERY

也许你已经听说过HTML5画布canvas标签,正如他的名字,这是一个允许我们在网页上创建和修改图形的元素。另外,我们也可以像其它页面元素一样往canvas上面添加jquery动画,监听事件。今天我就向大家介绍一款由canvas和jquery打造的幻灯片。当用户点击导航按钮切换到下一长幻灯片时,画布会以渐显得动画显示,同时制造出一个平滑的灯光效果。
  幻灯片和轮播图
 12709  10

jQuery自定义轮播图插件(原创)

使用jQuery实现Banner图自动滚动功能,同时提供对应的指示图标,点击对应的图标直接跳转到对应的Banner图
  幻灯片和轮播图
 6340  30

jquery实现图片浏览类似qq空间图片查看

利用layer.min.js插件进行实现
  幻灯片和轮播图
 9204  67

anoSlide演示8种焦点图轮播效果

anoSlide演示8种焦点图轮播效果
  幻灯片和轮播图
 6055  40

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复