slide.js使用文档

最新推荐文章于 2021-07-08 18:49:58 发布

weixin_30825581

最新推荐文章于 2021-07-08 18:49:58 发布

阅读量264

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/binmengxue/p/5381940.html

版权

<!doctype html>
<head>
<script src="js/jquery-latest.min.js"></script>
  <script src="js/jquery.slides.min.js"></script>
  <style>
    /* Prevents slides from flashing */防止闪烁
    #slides {
      display:none;
    }
  </style>  
</head>
<body>
    <div id="slides">
        <img src="http://placehold.it/940x528">
        <img src="http://placehold.it/940x528">
        <img src="http://placehold.it/940x528">
        <img src="http://placehold.it/940x528">
        <img src="http://placehold.it/940x528">
    </div>
    <script>
        $(function(){
          $("#slides").slidesjs({
            width: 940,   
            height: 450,
            navigation: {       //显示上一张下一张
                active: true
            },
            play: {                 //设置自动时的动画效果、自动播放、间隔、鼠标悬停、移出恢复时间
                active: false,
                // 生成下一张和上一张按钮。
                // 可以设置false，使用自己写的按钮来替代系统的按钮。
                // previous button: class="slidesjs-previous slidesjs-navigation"  自己写的按钮，上一张按钮的class=“”
                // next button: class="slidesjs-next slidesjs-navigation"  下一张按钮的class=""
                effect: "slide",
                // [string] Can be either "slide" or "fade".  效果滑动，也可以设置成fade幻灯
                interval: 2000,//动画间隔
                auto:true,//默认不自动进行播放！十分重要，设置成true。
                swap: false,//显示和隐藏按钮
                pauseOnHover: true,// 鼠标移入，暂停动画
                restartDelay: 2500,// 恢复动画间隔
            },
            effect: {    //特别注意：动画效果要与上面play中的属性保持一致，否则点击切换图片后，无法恢复动画
                slide:{
                speed:2000, //动画切换速度
                 crossfade: true// 交叉幻灯效果
            }}
    
          });
        });
    </script>
</body>

转载于:https://www.cnblogs.com/binmengxue/p/5381940.html

weixin_30825581

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
slide.js使用文档

<!doctype html><head><script src="js/jquery-latest.min.js"></script> <script src="js/jquery.slides.min.js"></script> <style> /* Prevents slid...
复制链接

扫一扫