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

首先，确保您从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>

连续淡入和旋转图像

1 个答案: