如何使此滑块更平滑？

http://wildwoodtreeservices.wordpress.redcow.ca/

正如你可以看到它的功能，它从图像转变为图像，且对应的图像变化相匹配，以圆一个不同的颜色...我唯一的问题是，它不是光滑。图像以丑陋的方式加载，让您看到背景图像的时间是瞬间而不是图像本身。

有什么办法可以使淡入/淡出过渡平滑，让他们看不到任何背景？我是否必须在页面加载或其他内容上缓存所有11个图像？

在此先感谢

我的JS：

<script> 
    var sliderpics = []; 
    sliderpics[0] = "/wp-content/themes/REDCOW-WP/slider1.jpg"; 
    sliderpics[1] = "/wp-content/themes/REDCOW-WP/slider2.jpg"; 
    sliderpics[2] = "/wp-content/themes/REDCOW-WP/slider3.jpg"; 
    sliderpics[3] = "/wp-content/themes/REDCOW-WP/slider4.jpg"; 
    sliderpics[4] = "/wp-content/themes/REDCOW-WP/slider5.jpg"; 
    sliderpics[5] = "/wp-content/themes/REDCOW-WP/slider6.jpg"; 
    sliderpics[6] = "/wp-content/themes/REDCOW-WP/slider7.jpg"; 
    sliderpics[7] = "/wp-content/themes/REDCOW-WP/slider8.jpg"; 
    sliderpics[8] = "/wp-content/themes/REDCOW-WP/slider9.jpg"; 
    sliderpics[9] = "/wp-content/themes/REDCOW-WP/slider10.jpg"; 
    sliderpics[10] = "/wp-content/themes/REDCOW-WP/slider11.jpg"; 

    var currentImage = 0; 
    var currentCircle = 0; 

    function changeSliderImage() { 
     currentImage++; 
     currentCircle++; 
     if(currentImage > 10) currentImage = 0; 
     if(currentCircle > 10) currentCircle = 0; 

     $("#sliderpic").fadeOut(200, function() { 
      $(this).attr("src",sliderpics[currentImage]); 
      $("#circle" + currentCircle).attr("src","/wp-content/themes/REDCOW-WP/circle_active.png"); 
      $("#circle" + (currentCircle - 1)).attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png"); 
      if(currentCircle == 0){ 
       $("#circle10").attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png"); 
      } 
     }); 
     $("#sliderpic").fadeIn(200); 

     setTimeout(changeSliderImage, 5000); 
    } 

    $(document).ready(function($) { 
     setTimeout(changeSliderImage, 5000); 
    }); 

</script>

来源

2013-05-30 Samuel Stiles

不责备的图像缓存。如果是缓存，那么幻灯片放映从第二次开始就会消失。但是，它仍然具有相同的效果。所以这就是要做的意思。 – Sharky

我对图像缓存并不十分了解。我只是想知道为什么它不是“褪色”和“淡出”，因为它应该是...这是丑陋的图像加载样式:( –

没有“应该”只有“如何编程“这是它的编程方式，它有200ms的完全淡出，200ms的淡入淡出和2000ms的超时。看看标记 – Sharky

为什么要重新发明轮子？尝试this jquery plugin，它有一吨的可配置选项，并具有良好的浏览器支持。

来源

2013-05-30 15:16:29 Novocaine

我的老板已经通知我，我从头开始做这个工作，并且在上面添加了我的JS. –

不错，我建议看一下插件。看看他们是怎么做的，图片在HTML页面上开始，所以动画没有延迟，因为所有的图片都已经加载，这将防止出现一个问题，同样如马丁所说，切换'fadeIn'和' fadeout'围绕 – Novocaine

我交换你的淡出和淡入，以及另两个图像之间：

HTML：

<img id="sliderpic0" class="sliderpic" alt="slider pic 1" src="[src]" style="display: inline;"> 
<img id="sliderpic1" class="sliderpic" alt="slider pic 1" src="[src]" style="display: inline;">

的Javascript：

function changeSliderImage(bleh) { 
    currentImage++; 
    currentCircle++; 
    if(currentImage > 10) currentImage = 0; 
    if(currentCircle > 10) currentCircle = 0; 

    var elemone = (bleh) ? $("#sliderpic0") : $("#sliderpic1"); 
    var elemtwo = (bleh) ? $("#sliderpic1") : $("#sliderpic0"); 

    $(elemone).fadeIn(200); 
    $(elemtwo).fadeOut(200, function() { 
     $(this).attr("src",sliderpics[currentImage]); 
     $("#circle" + currentCircle).attr("src","/wp-content/themes/REDCOW-WP/circle_active.png"); 
     $("#circle" + (currentCircle - 1)).attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png"); 
     if(currentCircle == 0){ 
      $("#circle10").attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png"); 
     } 
    }); 

    setTimeout(changeSliderImage(!bleh), 2000); 
}

真快脑图示，应解决您的问题！ :)

编辑：哦，改变你的document.ready功能，看起来像这样：

$(document).ready(function($) { 
    setTimeout(changeSliderImage(true), 2000); 
});

来源

2013-05-30 15:28:49 martinthebeardy

ht tp：//puu.sh/34tAn.png <--- http://puu.sh/34tAG.png < - –

如何使此滑块更平滑？

回答

相关问题