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

Question

我正在尝试寻找在图像之间连续淡入淡出和旋转的代码。我下载了适用于 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>

Answer 1

首先，确保您包含 Jquery，无论是来自 CDN 还是包含在准确引用 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>

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

Fade and rotate between images continuously

html

javascript

css

jsfiddle