jQuery轮播图 平滑过渡,自动播放(原创)

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

 11531  26  查看评论 (2)
分享到微信朋友圈
X
jQuery轮播图  平滑过渡,自动播放(原创) ie兼容6

更新时间:2022-07-18 02:28:07

更新说明:修改了图片,避免不必要的问题!


更新时间:2022-07-15 00:37:58

将上面这段javascript代码复制到代码底部,轮播图的代码要在他上面最好放在文档开头head部分。

相关插件-幻灯片和轮播图

jQuery仿百度图片浏览效果

jQuery仿百度图片浏览效果
  幻灯片和轮播图
 38208  357

jQuery跨浏览器幻灯片插件jquery.iosslider

iosSlider iosSlider是一个可定制的、跨浏览器幻灯片jQuery插件。设计用于作为内容滑块、旋转木马、滚动网站旗帜或者图片库。其效果类似于ios的横向滚屏效果
  幻灯片和轮播图
 31502  334

lightslider支持移动触摸的轻量级jQuery幻灯片插件

lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马。
  幻灯片和轮播图
 29288  355

自制炫酷的图片轮换效果插件

自制炫酷的图片轮换效果 响应式,自适应
  幻灯片和轮播图
 33461  345

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

    蕙质兰心 0
    2022/7/31 9:07:35
    不支持手机手势呐 回复
    ?侵蚀Emotio 0
    2022/7/15 11:18:39

    css代码:

    *{
        padding: 0;
        margin: 0;
    }
    
    .focus {
        border: 1 px solid black;
        margin: 150 px auto;
    }

    HTML代码:

    <div class="focus">
        <ul>
            <li><img src="img/tu4.jpg"></li>
            <li><img src="img/tu2.jpg"></li>
            <li><img src="img/tu3.jpg"></li>
            <li><img src="img/tu1.jpg"></li>
        </ul>
        <ol>
        </ol>
        <span class="lb_l"><</span>
        <span class="lb_r">></span>
    </div>

    js代码:

    <script>
        var focusWidth = 640; // 轮播图的宽
        var focusHeight = 427.5; // 轮播图的高
        var focusOlLeft = 270; // 小点距左边框距离
        var focusOlTop = 5; // 小点距下边框距离
        var rotation_Speed = 3000; // 轮播图自动播放速度 毫秒
        setRotation(focusWidth, focusHeight, focusOlLeft, focusOlTop, shuffingSpeed);
    </script>
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复