• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 广告特效 >  仿神奇世界首页jque正文

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

作者:我爱模版网
大小:0.129MB
点击次数:
发布时间:2014-02-14 14:03
分享到:

特效介绍

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

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

使用方法

1、在头部引入相关js代码和css代码:
01<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
02<script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
03<script type="text/javascript">
04$().ready(function() {
05    $('.kwicks').kwicks({
06        max : 966,
07        spacing : 0
08    });
09});
10</script>
11<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
12<style type="text/css">
13.kwicks {
14    list-style: none;
15    position: relative;
16    margin: 0;
17    padding: 0;
18}
19.kwicks li{
20    width: 322px;
21    height: 116px;
22    display: block;
23    overflow: hidden;
24    padding: 0;
25}
26.kwicks.horizontal li {
27    margin-right: 0px;
28    float: left;
29}
30.kwicks.vertical  li{
31    margin-bottom: 0px;
32}
33.kwicks.horizontal #kwick_4 {
34    margin-right: none;
35}
36.kwicks.vertical #kwick_4 {
37    margin-bottom: none;
38}
39#kwick_1 a:{ border:0px;}
40</style>

2、把以下代码拷贝到你想引用的地方
01<ul class="kwicks horizontal" style="margin:0 auto">
02    <li id="kwick_1">
03        <a href="http://www.5imoban.net/" target="_blank" title="我爱模版仿神奇世界首页jquery手风琴广告轮播效果">
04        <img src="Images/a0404.jpg" width="966" height="116" alt="我爱模版仿神奇世界首页jquery手风琴广告轮播效果" border="0" />
05        </a>
06    </li>
07    <li id="kwick_2">
08        <a href="http://www.5imoban.net" target="_blank" title="我爱模版仿神奇世界首页jquery手风琴广告轮播效果">
09        <img src="Images/a0202.jpg" width="966" height="116" alt="我爱模版仿神奇世界首页jquery手风琴广告轮播效果" border="0" />
10        </a>
11    </li>
12    <li id="kwick_3">
13        <a href="http://www.5imoban.net" target="_blank" title="我爱模版仿神奇世界首页jquery手风琴广告轮播效果">
14        <img src="Images/a0303.jpg" width="966" height="116" alt="我爱模版仿神奇世界首页jquery手风琴广告轮播效果" border="0" />
15        </a>
16    </li>
17</ul>

注:
1、.kwicks为你要实现此效果的类名,可以自定义。但是,在调用js函数的时候,一定注意修改:
1$('.kwicks').kwicks({
2    max : 966,
3    spacing : 0
4});

2、参数说明:“max”为滚动图片滚动的范围,建议设置成外层ul的尺寸。“spacing”为滚动图片的间距,建议设置为0。如果不明白,可以自己尝试修改。
  • 本文标签:
  • 仿,神奇,世界,首页,jquery,手风琴,广告,轮播,仿,
简单的js对联广告,js图片随滚动条滚动效果
点击从左侧弹出的很有创意的横幅广告