仿神奇世界首页jquery手风琴广告轮播效果
- 作者：我爱模版网
- 大小：0.129MB
- 点击次数：
- 发布时间：2014-02-14 14:03
特效介绍
仿神奇世界首页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。如果不明白，可以自己尝试修改。
- 本文标签：
- 仿,神奇,世界,首页,jquery,手风琴,广告,轮播,仿,
