javascript - 淡入淡出并在图像之间连续旋转

我正在尝试查找代码以使图像连续不断地淡入淡出和旋转。我下载了可在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>

然后，将您的rotator脚本放在页面的末尾，或包装成document.ready函数，如下所示：

<script>
    $(function(){
        //all your codes
    });
</script>

关于javascript - 淡入淡出并在图像之间连续旋转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34812657/