jQuery无缝滑动轮播插件

 查看演示  website  立即下载

更新时间：2019-06-24 22:39:47

更新说明：

1. 修改上下滑动轮播点击圆点白屏的问题

2. 修改移动端不支持手动滑动轮播的问题

3. 新增鼠标滚动轮播,鼠标拖动轮播,是否循环轮播,自定义箭头图片样式,自定义圆点图片样式

用法:

var myPi = new Pike(".pi", {
    mousewheel: true, //是否开启鼠标滚动轮播(默认false)
    drag: false, //是否开启鼠标拖动 (默认为: true, 如不需要拖动设置false即可)
    loop: true, //是否循环轮播 (默认为: false)
    spotDirection: "right", //圆点的方向(left:左, right:右, top:上, bottom:下, 默认:bottom)
    arrowList: { //自定义箭头图片
        left: "img/left.png",
        right: "img/right.png",
        width: 70, //如果不设置宽高,则按照图片默认宽高显示
        height: 70,
    },
    spotList: { //自定义圆点
        width: 12, //宽
        height: 12, //高
        borderRadius: 50, //圆角边框
        opacity: 0.6, //透明度
        color: "white", //颜色
        backgroundImg: "img/red.png", //圆点图片
        select: { //自定义圆点选中样式
            width: 18, //宽
            borderRadius: 50, //圆角边框
            height: 18, //高
            color: "blue", //颜色
            backgroundImg: "img/haha.png", //圆点选中图片
        }
    },
})

更新时间：2019/6/23 上午12:54:01

更新说明：

1. 解决上下滑动轮播点击圆点白屏的问题

2. 解决火狐手动滑动轮播的问题

3. 新增自定义箭头图片样式, 圆点图片样式,圆点方向, 鼠标滚动轮播, 鼠标滑动轮播, 是否循环轮播

新增功能使用方法: 

 var myPi = new Pike(".pi", {
     arrowList: { //自定义箭头图片
         left: "img/left.png",
         right: "img/right.png",
         width: 70, //如果不设置宽高,则按照图片默认宽高显示
         height: 70,
     },
     spotList: { //自定义圆点
         width: 12, //宽
         height: 12, //高
         borderRadius: 50, //圆角边框
         opacity: 0.6, //透明度
         backgroundImg: "img/red.png", //圆点图片
         select: { //自定义圆点选中样式
             width: 18, //宽
             borderRadius: 50, //圆角边框
             height: 18, //高
             color: "blue",
             backgroundImg: "img/haha.png" //圆点选中图片
         }
     },
     spotDirection: "right", //圆点的方向(left:左, right:右, top:上, bottom:下, 默认:buttom)
     mousewheel: true, //是否开启鼠标滚动轮播(默认false)
     loop: true, //是否循环轮播 (默认为: false)
     drag: false, //是否开启鼠标拖动轮播 (默认为: true, 如不需要拖动设置false即可)
 })

使用方法

引用所需两个文件jquery和pike.min.js

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="pike.min.js"></script>

html

<div class="pi">
    <!-- 轮播 -->
    <div class="pike">
        <div>
            <img src="img/jq22-3.png" alt="">
        </div>
        <div>
            <img src="img/jq22-2.png" alt="">
        </div>
        <div>
            <img src="img/jq22-1.png" alt="">
        </div>
        <div>
            <img src="img/jq22-4.png" alt="">
        </div>
    </div>
    <!-- 轮播左箭头(如果不需要删除即可) -->
    <div class="pike_prev"></div>
    <!-- 轮播右箭头(如果不需要删除即可) -->
    <div class="pike_next"></div>
    <!-- 轮播圆点(如果不需要删除即可) -->
    <div class="pike_spot"></div>
</div>

js

var myPi = new Pike(".pi", {
    type: 2, // 轮播的类型(1渐隐, 2左右滑动, 3.上下滑动)
    automatic: true, //是否自动轮播 (默认false)
    slide: 500, //轮播滑动的速度(默认800)
    autoplay: 2000, //自动轮播毫秒 (默认3000)
    hover: true, //鼠标悬停轮播 (默认false)
    arrowColor: "yellow", //箭头颜色 (默认绿色)
    arrowBackgroundType: 2, //箭头背景类型 (1: 方形, 2:圆形)
    arrowBackground: 1, //箭头背景色 (1:白色,2:黑色, 默认:无颜色)
    arrowTransparent: 0.2, //箭头背景透明度 (默认: 0.5)
    spotColor: "white", //圆点颜色 (默认: 白色)
    spotType: 1, //圆点的形状 (默认: 圆形, 1:圆形, 2.矩形)
    spotSelectColor: "red", //圆点选中颜色 (默认绿色)
    spotTransparent: 0.8, //圆点透明度 (默认0.8)
});

轮播图宽高修改也非常方便，只需要对css修改即可

.pi{
    width: 600px;
    height:300px;
    margin:0 auto;
}

PREVIOUS:
NEXT:
jQuery bootstrap响应式网站模板
弹出对话框插件MiniDialog(原创)