我爱模板网 > 特效插件 > 广告特效 >  仿神奇世界首页jquery手风琴广告轮播效果正文

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

特效介绍

仿神奇世界首页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。如果不明白,可以自己尝试修改。

部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:简单的js对联广告,js图片随滚动条滚动效果 下一篇:点击从左侧弹出的很有创意的横幅广告
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢