Question

允许缩略图 rc attr 在主图像窗口中替换图像。

        $(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();
                            })
                            });
            });

Currently the behaviour does the following: 1. hover over - main image fades to white, then fades into the sub image. 2. mouse out - main image fades to white, then is replaced with the original.

我真正需要的东西而不是在两个图像状态之间的白色转变我希望它们能有某种重叠( 所以一个会随着另一个消失而消失)

有可能吗?

感谢谢谢

Answer 1

您不能以淡出/ 淡出/ 淡出/ 淡出方式依次对图像进行滚动。您必须以一种替代方式实现过渡。我为你写了整个代码 :

    <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 。希望它有所帮助!

友情链接