jQuery反转式轮播插件roundabout.js

所属分类:媒体-幻灯片和轮播图

 21095  248  查看评论 (6)
分享到微信朋友圈
X
jQuery反转式轮播插件roundabout.js ie兼容6

更新时间:2019-08-01 00:52:24

更新说明:更新参数说明。

使用方法

引用样式文件

<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/planting.css" />

js脚本文件

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

Html

<div class="" id="featured-area">
    <ul>
        <li>
            <img src="img/t1.png">
        </li>
        <li>
            <img src="img/t2.png">
        </li>
        <li>
            <img src="img/t3.png">
        </li>
    </ul>
</div>

js

 $(document).ready(function() {
     $('#featured-area ul').roundabout({
         easing: 'easeOutInCirc',
         duration: 600, // 运动速度                
         autoplay: true, // 自动播放               
         autoplayDuration: 1500, // 自动播放的时间               
         minOpacity: 0, //最小的透明度              
         maxOpacity: 1, //最大的透明度                
         reflect: false, // 为true时是从左向右移动,为false从右向左移动               
         startingChild: 3, // 默认的显示第几张图片              
         autoplayInitialDelay: 5000, // 从第几秒时,开始自动播放(默认毫秒)开始的第一次管用                
         autoplayPauseOnHover: true, // 鼠标移入元素内是否自动播放,为true不播放,false还自动播放               
         enableDrag: true // 在移动端可以拖拽播放          
     });
 });
相关插件-幻灯片和轮播图

js商品详情轮播图

产品组图展示,自动轮播图
  幻灯片和轮播图
 38144  366

jQuery轮播插件(原创轮播)

代码注释全,方便大家自行修改的轮播插件
  幻灯片和轮播图
 40660  366

jQuery轮播图插件

jQuery滑动式轮播图插件
  幻灯片和轮播图
 39444  360

jQuery.slidizle可完全自定义的响应式jQuery幻灯片插件

jQuery.slidizle是一款可完全自定义的响应式jQuery幻灯片插件。该插件只是将一些class类放置到幻灯片的HTML标签中,用户可以通过修改这些class来修改幻灯片的外观。
  幻灯片和轮播图
 34731  380

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    xiaopangzi 0
    2019/8/24 13:16:31
    $('img').css('left':10); 回复
    wubin11 0
    2019/8/16 9:24:40
    有无缝衔接吗?
    回复
    MAC的小公主 0
    2019/8/2 18:54:12
    这个不能加分页器吗?有没有接口? 回复
    Radiom M 0
    2019/7/31 9:37:35
    请问如何修改图片的left值
        闲趣丨下一站1
        2019/7/31 11:05:33
        切换的left值都是根据图片的宽度去获取的
        xiaopangzi0
        2019/8/24 13:18:03
        $('img').css('left':10);
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复