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

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

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

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

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


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

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

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

jquery仿酷狗官网新闻焦点图

jquery仿酷狗官网新闻焦点图,jquery扩展方法,自动切换,可控制时间,简单易改,效果很炫,适合首页展示,兼容各大浏览器
  幻灯片和轮播图
 30448  412

仿FLASH轮播图

纯js的运动加定时器做的,掌握后可以自己做出任何运动效果。
  幻灯片和轮播图
 24066  321

jQuery轮播插件(原创轮播)

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

响应式轮播

jQuery响应式轮播图插件
  幻灯片和轮播图
 61844  579

讨论这个项目(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>
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复