网站banner切换(slides.min.jquery.js)

来源:互联网 发布:黑客帝国4矩阵复活剧情 编辑:程序博客网 时间:2024/05/01 22:00

/*首页slides*/
#slidesc {
    height:420px;
    width:100%;
    margin:0 auto;
    position:relative;
    z-index:0;
}
#slidesc .slides_container {
    width:100%;
    height:420px;
    display:none;
    position:relative;
    margin:0 auto;
}
#slidesc .slides_container div {
    height:420px;
    width:100% !important;
    text-align:center;
}
#slidesc .slides_container div a {
    display:block;
    height:420px;
    width:1020px;
    margin:0 auto;cursor: pointer;
}
.qha {
    margin: 0 0 0 0;
    padding: 0;
    width: 120px;
    height: 10px;
    overflow: hidden;
    position: absolute;
    top: 407px;
    right: 12%;
    z-index: 99;
}
.qha li {
    float:left;
    margin:0 0 0 8px;
    list-style:none;
}
.qha li a {
    display: block;
    height: 10px;
    width: 20px;
    line-height: 430px;
    background: #fff;
    float: left;
    overflow: hidden;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.qha li a:hover,
.qha li.current a {
    background:#b50800;
}
#slidesc .next,#slidesc .prev {
    display:none;
}
.bannera {
    background:url(http://img.en.easthardware.net/upload/h/h1/hctools/picture/2014/06/26/41cfd7d0-9f27-4b54-8d71-c789a68d841a.jpg) no-repeat center 0;
}
.bannerb {
    background:url(http://img.en.easthardware.net/upload/h/h1/hctools/picture/2014/06/26/d582a00f-e5d8-4435-87f9-bceebb3872a5.jpg) no-repeat center 0;
}

/*slides*/

<script src="http://www.easthardware.com/js/slides.min.jquery.js">
</script>
<script>$(function(){
$('#slidesc').slides({
effect: 'fade', //去掉这句就是滑动效果
container: 'slides_container',//修改class名称(如果有同名)
paginationClass: 'qha',//修改class名称(如果有同名)
play: 2500,
pause: 2500,
hoverPause: true
});
});
</script>
<div id="slidesc">
<div class="slides_container">
<div class="bannera" onclick="location.href='product.html'">
<a href="product.html" title=""></a>
</div>
<div class="bannerb" onclick="location.href='product.html'">
<a href="product.html" title=""></a>
</div>
<div class="bannerc" onclick="location.href='product.html'">
<a href="product.html" title=""></a>
</div>
</div>
</div>
0 0
原创粉丝点击