最新消息:

比较流行的几款banner轮播插件,jQuery幻灯片插件

网站建设 hanpan 405浏览 1评论

几乎所有的网站都会有banner,banner绝大部分都是动态切换的,那么怎么才能设计各好看又简单的切换效果呢?目前市面上有几款简单功能强大的幻灯片切换插件,下面来简单介绍下。

1:superslide2

SuperSlide2.1滑动门jQuery插件是一款包含网站上常用的“焦点图 幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等效果。

因为SuperSlide是基于jQuery的插件,所以前提必须先引用jQuery,再引用SuperSlide。

具体使用步骤参考

http://www.superslide2.com/howToUse.html

superslide2各个函数的参数的含义

http://down.admin5.com/demo/code_pop/18/562/param.html

2:ResponsiveSlides.js – jQuery幻灯片插件

ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。

和其他幻灯演示插件相比最大的特点:

1.文件较小(通过缩减和gz压缩只有792字节)

2.功能简单(R.js只支持两种模式:图片自动淡出淡入和使用页码标签来手动切换图片。)

 

使用方法:

1. 引入文件

1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

2. 添加HTML标记

1
2
3
4
5
<ul class="rslides">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
</ul>

3. 添加CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

4. 调用

1
2
3
4
5
<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

参数:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
$(".rslides").responsiveSlides({
  auto: true,             // Boolean: 设置是否自动播放, true or false
  speed: 500,            // Integer: 动画持续时间,单位毫秒
  timeout: 4000,          // Integer: 图片之间切换的时间,单位毫秒
  pager: false,           // Boolean: 是否显示页码, true or false
  nav: false,             // Boolean: 是否显示左右导航箭头(即上翻下翻), true or false
  random: false,          // Boolean: 随机幻灯片顺序, true or false
  pause: false,           // Boolean: 鼠标悬停到幻灯上则暂停, true or false
  pauseControls: true,    // Boolean: 悬停在控制板上则暂停, true or false
  prevText: "Previous",   // String: 往前翻按钮的显示文本
  nextText: "Next",       // String: 往后翻按钮的显示文本
  maxwidth: "",           // Integer: 幻灯的最大宽度
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: 声明自定义分页导航
  namespace: "rslides",   // String: 修改默认的容器名称
  before: function(){},   // Function: 回调之前的参数
  after: function(){}     // Function: 回调之后的参数
});

ResponsiveSlides.js官网:http://responsiveslides.com/

大家可以加我微信:wenxian31。交流更多网络优化和营销知识。

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 炎热的夏天,看到这样的博客瞬间清凉了许多!
    闺房独自乐3个月前 (07-13)回复