仿神奇世界首页jquery手风琴广告轮播效果

仿神奇世界首页jquery手风琴广告轮播效果。兼容各大浏览器。

1、在头部引入相关js代码和css代码：

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
    $('.kwicks').kwicks({
        max : 966,
        spacing : 0
    });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.kwicks {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}
.kwicks li{
    width: 322px;
    height: 116px;
    display: block;
    overflow: hidden;
    padding: 0;
}
.kwicks.horizontal li {
    margin-right: 0px;
    float: left;
}
.kwicks.vertical  li{
    margin-bottom: 0px;
}
.kwicks.horizontal #kwick_4 {
    margin-right: none;
}
.kwicks.vertical #kwick_4 {
    margin-bottom: none;
}
#kwick_1 a:{ border:0px;}
</style>

2、把以下代码拷贝到你想引用的地方

    <ul class="kwicks horizontal" style="margin:0 auto">
        <li id="kwick_1">
            <a href="http://www.5imoban.net/" target="_blank" title="我爱模版仿神奇世界首页jquery手风琴广告轮播效果">
            <img src="Images/a0404.jpg" width="966" height="116" alt="我爱模版仿神奇世界首页jquery手风琴广告轮播效果" border="0" />
            </a>
        </li>
        <li id="kwick_2">
            <a href="http://www.5imoban.net" target="_blank" title="我爱模版仿神奇世界首页jquery手风琴广告轮播效果">
            <img src="Images/a0202.jpg" width="966" height="116" alt="我爱模版仿神奇世界首页jquery手风琴广告轮播效果" border="0" />
            </a>
        </li>
        <li id="kwick_3">
            <a href="http://www.5imoban.net" target="_blank" title="我爱模版仿神奇世界首页jquery手风琴广告轮播效果">
            <img src="Images/a0303.jpg" width="966" height="116" alt="我爱模版仿神奇世界首页jquery手风琴广告轮播效果" border="0" />
            </a>
        </li>
    </ul>

注：
1、.kwicks为你要实现此效果的类名，可以自定义。但是，在调用js函数的时候，一定注意修改：

$('.kwicks').kwicks({
    max : 966,
    spacing : 0
});

2、参数说明：“max”为滚动图片滚动的范围，建议设置成外层ul的尺寸。“spacing”为滚动图片的间距，建议设置为0。如果不明白，可以自己尝试修改。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！