Question

<>A部分>

www.un.org/Depts/DGACM/index_french.htm

<div class="graphic fadehover" class="last">                
<img src="graphic5test image" alt="" class="a" />
<img src="graphic5-2test image" alt="" class="b" />
</div>

<>>随附文件。

.fadehover {display: block; height: 162px; margin: 70px 45px 0 0; position:relative;       width: 292px; z-index: 100; }
img.a {position: absolute; left: 0; top: 0; z-index: 10;}
img.b {position: absolute; left: 0; top: 0;}

<>和<>

$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});

www.un.org/Depts/DGACM/index_spanish.htm 然后我要再次使用以下文字:。

<div class="animation" class="fadehover">

    <img src="/sun-low image" alt="sun rising" class=""/>
    <img src="/sun-hi image" alt="sun rising" class=""/>        
    <img src="/sun-hi image" alt="sun rising" class=""/>        
</div>

<with annex css:

.animation {position: absolute; left: 675px; top: 10px; z-index: 25; } /*positions     sunrise and hills */

.hills{position: absolute; left: 340px; z-index: 50; }

img.e {position: absolute; left: 0; top: 0; z-index: 10;}
img.f {position: absolute; left: 0; top: 0; z-index:2; }

我知道上述图像链接是错误的,但因为我会赢得新的垃圾,让我与他们站在一起。

我愿再次使用文字或改动,以便能够在三个z-index(日元升)制成的图像之间脱节,但不知道如何找到双版的文字,以针对新成像。

谁能把我引向正确的方向?

感谢。

Answer 1

我很怀疑你想要什么,因此我也这样做。

如果有<代码>fadehover栏,则<代码>animation 然后,每1.5秒钟就通过所有图像进行循环,然后把图像环绕。如果没有<代码>animation等值,图像就只能改变。

我希望所有意见都足够清楚,以便你能够理解我正在做些什么。 Oh, and here is a demo of the all matter .

$(document).ready(function(){

 // make first image in each block the current image & hide the rest
 $(".fadehover").each(function(){
  $(this).find("img:first").addClass("current");
  $(this).find("img:not(:first)").hide();
 });

 // display next image
 var timer,
  nextImg = function(el) {
   // fadeout current image
   var curImg = el.find( img.current )
    .removeClass( current )
    .stop(true, true).fadeOut( slow );
   // find next image; if no next image exist, reset to the first one
   curImg = (curImg.next().length) ? curImg.next() :  curImg.parent().find( img:first );
   // fadein current (next) image
   curImg
    .addClass( current )
    .fadeIn( slow );
  };

 // cycle through each image on hover
 $(".fadehover").hover(function(){
   var el = $(this);

   // if the fadehover has the animation class, then cycle through the images while hovering
   if (el.is( .animation )) {
    timer = setInterval(function(){ nextImg(el); }, 1500);
   }
   // no animation, just show the next image on hover
   nextImg(el);

  }, function(){
   var el = $(this);

   // on mouseout, stop animation, or do nothing
   if (el.is( .animation )) {
    clearInterval(timer);
   }
   // fadeIn, just in case the clearInterval breaks the animation
   el.find( .current ).stop(true, true).fadeIn( slow );

  });

});

更新(new demo)

既然我理解你需要的话,就尝试这一法典:

$(document).ready(function(){

 // make first image in each block the current image & hide the rest
 $(".fadehover").each(function(){
  $(this).find("img:first").addClass("current");
  $(this).find("img:not(:first)").hide();
 });

 // display next image
 var timer,
  nextImg = function(el) {
   // fadeout current image
   var curImg = el.find( img.current )
   // find next image; if no next image exist, add "done" class
   if (curImg.next().length) {
    // fadein current (next) image
    curImg
     .removeClass( current )
     .stop(true, true).fadeOut( slow )
     .next()
     .addClass( current )
     .fadeIn( slow );
   } else {
    el.addClass( done );
   }

  };

 // cycle through each image on hover
 $(".fadehover").hover(function(){
   var el = $(this);
   // if the element has the "done" class, then stop
   if (!el.is( done )) {
    timer = setInterval(function(){ nextImg(el); }, 2000);
   }
  }, function(){
   var el = $(this);
   if (el.is( done )) { return; }
   // on mouseout, stop animation
   clearInterval(timer);
   // fadeIn, just in case the clearInterval breaks the animation
   el.find( .current ).stop(true, true).fadeIn( slow );
  });

});

友情链接