当前位置：首页 > 网页特效 > 幻灯片和轮播图

兼容IE8的jQuery轮播图插件

分类：幻灯片和轮播图日期：2024-05-14 点击(2) 评论(0)

兼容IE8的jQuery轮播图插件

简介

简要教程
这是一款兼容ie8的响应式jquery轮播图插件。该jquery轮播图插件使用简单，浏览器兼容性良好。它的特点还有：
1. 支持横屏/竖屏滑动
2. 支持循环播放
3. 支持自动播放（鼠标悬停到导航按钮上可暂停）
4. 支持键盘方向键和鼠标滑轮切换
##### 使用方法

------------

在页面中引入pageSwitch.min.css，jquery和pageSwitch.min.js文件。
```javascript
<link rel="stylesheet" href="dist/pageSwitch.min.css">
<script src="dist/jquery.min.js"></script>
<script src="dist/pageSwitch.min.js"></script> 
```
##### HTML结构
该轮播图的HTML结构如下：
```javascript
<div id="container">
    <div class="sections">
        <div class="section" id="section0"><h3>this is the page0</h3></div>
        <div class="section" id="section1"><h3>this is the page1</h3></div>
        <div class="section" id="section2"><h3>this is the page2</h3></div>
        <div class="section" id="section3"><h3>this is the page3</h3></div>
    </div>
</div>
```
##### 初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该轮播图插件。
```javascript
$("#container").PageSwitch({
    direction:'horizontal',
    easing:'ease-in',
    duration:1000,
    autoPlay:true,
    loop:'false'
});
```
#### 配置参数
```javascript
selectors : {
    sections : ".sections",  // 容器
    section : ".section", // 每一页
    pages : ".pages", // 分页导航(小圆点)
    active : ".active" // 当前激活页
},
index : 0, // 开始位置
easing :  "ease", // 动画函数
duration : 500, // 毫秒
loop : false, // 是否循环播放，自动播放时该属性为true，设置无效
pagination : true, // 是否分页处理，是否显示小圆点
keyboard : true, // 是否支持键盘上下左右切换
direction : "vertical", // 竖直或水平滑动
autoPlay: true, // 自动播放
interval: 3000, // 自动播放间隔
callback :  "" // 切换动画结束后回调函数         
```

web299.com

兼容IE8的jQuery轮播图插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果