<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>小米官网jQuery焦点图</title>
<script type="text/javascript" src="js/jquery18.js"></script>
<script type="text/javascript" src="js/slides.js"></script>
<script type="text/javascript">
$(function(){
$("#xmSlide").xmSlide({
width: 950,
height: 639,
responsiveWidth:710,
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 400
}
},
play: {
effect: "fade",
interval: 5000,
auto: true,
pauseOnHover: true,
restartDelay: 2500
}
});
});
</script>
<style>/*reset*/
body,h1,span,h3,h4,h5,h6,blockquote,p,pre,dl,dd,menu,ol,ul,caption,th,td,form,fieldset,legend,input,button,textarea,address{margin:0;padding:0}
h1,span,h3,h4,h5,h6{font-size:100%}
menu,ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;font-size:inherit}
fieldset,img{border:0}
address,cite,dfn,em,var{font-style:normal}
code,kbd,pre,samp{font-family:courier new,courier,monospace}
input,button,textarea,select{font-size:100%}
abbr[title]{border-bottom:1px dotted;cursor:help}a{text-decoration:none}
body,input,button,textarea,select,option,optgroup{font:12px arial}
html,body{width:100%;height:100%;font-family:"微软雅黑","宋体","黑体",Arial;}
.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}
.clearfix:after{clear:both}
/*banner*/
.focus{height:730px;}
.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:15px;text-align:center;}
.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);}
</style>
</head>
<body>
<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.111cn.net" class="item1" target="_blank">了解小米3</a>
<a href="http://www.111cn.net" class="item2" target="_blank">进入小米网</a><br/>
<span><a href="http://www.111cn.net" target="_blank">小米手机3视频>></a></span>
</p>
</div>
</div>
</body>
</html>
|
