DDR爱好者之家

JS实现图片幻灯片效果代码实例
站长资源 2024/12/27 佚名
5 1538
DDR爱好者之家 Design By 杰米

其效果是点击图片切换到下一张图片

首先准备五张图片

 <ul class="imge">
 <li><img src="/UploadFiles/2021-04-02/1.jpg">


样式





 .imge li{
 position:absolute;/*绝对定位*/
 top:10px;
 left:10px;
 list-style-type:none;}
 </style>





js





 <script language="javascript" type="text/javascript"> 
    $(document).ready(function () { 
        //所有图片隐藏
       $(".imge li").hide();
        //第一张图片淡入
       $(".imge li").first().fadeIn("slow");
     
       //单击事件（当前图片淡出，下一张图片淡入）
       $(".imge li").click(function(){
         var next=$(this).next();
         if($(this).index()!=$(".imge li").length-1){
           $(this).fadeOut("slow");
           next.fadeIn("slow");
         }else if($(this).index()==$(".imge li").length-1){
           next=$(".imge li").first();
           $(this).fadeOut("slow");
           next.fadeIn("slow");
         }
         return false;
       });
       //注：最后一张图片的判断
       //禁止跳转
     })
 </script>





其中用的是 fadeIn() -> 淡入 和 fadeOut()-> 淡出 两者效果叠加则可用 fadeToggle()


fadeToggle() 方法在 fadeIn() -> 淡入 和 fadeOut()-> 淡出 方法之间切换。


如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。


如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。


三者的语法都是:$(selector).fadeOut / fadeIn / fadeToggle(speed,easing,callback)


其中slow是speed参数("毫秒","slow","fast")




毫秒

"slow"

"fast"






easing的参数("swing","linear")




"swing" - 在开头/结尾移动慢，在中间移动快

"linear" - 匀速移动






callback:


　　可选。fadeToggle() 方法执行完之后，要执行的函数。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米