在图像之间连续淡入淡出和旋转

Fade and rotate between images continuously

本文关键字：淡出 旋转 淡入 连续 图像 之间      更新时间：2023-09-26

我正在尝试查找在图像之间连续淡入淡出和旋转的代码。我下载了适用于JSFiddle的脚本，但当我申请我的网站时没有。.有人可以帮助我吗？这是代码：

    <head>
    <script type="text/javascript">

     $('.fadein img:gt(0)').hide();
    setInterval(function () {
        $('.fadein :first-child').fadeOut()
                         .next('img')
                         .fadeIn()
                         .end()
                         .appendTo('.fadein');
    }, 4000); // 4 seconds

    </script>
     </head>
      <style>
     .fadein {
       position:relative;
        height:320px;
        width:320px;
    }
    .fadein img {
         position:absolute;
         left:0;
         top:0;
    }
     </style>
 <div class="fadein">
    <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">
    <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">
    <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">
    <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">
    <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg">
</div>

首先，确保包含来自 CDN 或准确引用 Jquery 文件的脚本标记中的 Jquery。例如，如果 Jquery-1.12.0.min.js 位于您的 js 文件夹中，则脚本如下所示： 

<script src="js/jquery-1.12.0.min.js"></script>

然后，将旋转器脚本放在页面末尾，或换行 document.ready 函数，如下所示：

<script>
    $(function(){
        //all your codes
    });
</script>
相关文章：