jquery轮播图-小米网效果

查看演示立即下载

插件描述：使用 jquery slides实现小米轮播图效果

实现代码

引用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="/" class="item1" target="_blank">了解小米3</a> 
        <a href="/" class="item2" target="_blank">进入小米网</a><br>
      <span><a href="/" 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);
}

<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>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery抽奖插件 jQueryRotate
下一个特效：贴片效果插件Sticker.js