文章/答案/技术大牛

发布

问jquery图像翻转行为
EN

Stack Overflow用户

提问于 2012-05-22 21:31:01

回答 1查看 409关注 0票数 0

我有以下代码，允许缩略图src属性替换主图像窗口中的图像。

        $(document).ready(function(){   
            var originalimg = $('#imageMain img').attr('src');
                $(".subImage").hover(function(){
                        var currentimg = $(this).attr('src');
                    $('.mainImage').fadeOut(function () {
                    $('.mainImage').attr('src', currentimg).fadeIn();
                        });
                    },function(){
                            $('.mainImage').fadeOut(function() {
                                $('.mainImage').attr('src', originalimg).fadeIn();
                            })
                            });
            });

当前的行为如下: 1.将鼠标悬停在主图像上将淡入白色，然后淡入子图像。2.鼠标外-主图像淡出为白色，然后替换为原始图像。

我真正需要的不是两个图像状态之间的“白色”转换，我想让它们有点重叠(这样一个淡出，另一个淡入)-

这个是可能的吗？

谢谢

thumbnails

behavior

jquery

image

回答 1

Stack Overflow用户

发布于 2012-05-22 21:52:14

你不能用fadeout/fadeout顺序地旋转图像。你必须用另一种方式进行转换。我已经为你写了整个代码：

    <head>
    <title>jQuery Image Rotator</title>
   <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
      $("#photoshow").hover(function() {
        setInterval("rotateImages()", 2000); // set the interval time as your wish
    });

    function rotateImages() {
        var oCurPhoto = $('#photoShow div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.length == 0)
            oNxtPhoto = $('#photoShow div:first');

        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
            function() {
                oCurPhoto.removeClass('previous');
            });
    }
</script>
       <style type="text/css">
         #photoShow {
        height:400px;
         width:400px;
         }
      #photoShow div {
        position:absolute;
        z-index: 0;
         }
      #photoShow div.previous {
        z-index: 1;
         }
         #photoShow div.current {
          z-index: 2;
           }
</style>
    </head>
  <body>
    <div id="photoShow">
       <div class="current">
        <img src="images/Grass.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
    </div>
    <div>
        <img src="images/Leaf.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
    </div>
    <div>
        <img src="images/Spring.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
    </div>
    <div>
        <img src="images/Water.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
    </div>
     </div>
   </body>
    </html>

它将使用适当的类、id名称和图像url.Hope通过one.Replace转换图像，这很有帮助！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10703084

复制

相似问题

问jquery图像翻转行为
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery图像翻转行为EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery图像翻转行为
EN