图片轮替的JS代码

<script   language=javaScript>  
  <!--//  
  sandra0   =   new   Image();  
  sandra0.src   =   "diaoyan.jpg";  
  sandra1   =   new   Image();  
  sandra1.src   =   "diaojiaolu.jpg";  
  sandra2   =   new   Image();  
  sandra2.src   =   "fengce.jpg";  
  sandra3   =   new   Image();  
  sandra3.src   =   "wanminda.jpg";  
  var   i_strngth=1  
  var   i_image=0  
  var   imageurl   =   new   Array()  
  imageurl[0]   ="diaoyan.jpg"  
  imageurl[1]   ="diaojiaolu.jpg"  
  imageurl[2]   ="fengce.jpg"  
  imageurl[3]   ="wanminda.jpg"  
  imageurl[4]   ="wanminda.jpg"  
  function   showimage()   {    
  if(document.all)   {  
  if   (i_strngth   <=110)   {  
  testimage.innerHTML="<img   style='filter:alpha(opacity="+i_strngth+")'   src="+imageurl[i_image]+"   border=0>";  
  i_strngth=i_strngth+10  
  var   timer=setTimeout("showimage()",100)  
  }  
  else   {  
  clearTimeout(timer)  
  var   timer=setTimeout("hideimage()",1000)  
  }  
  }  
  if(document.layers)   {  
  clearTimeout(timer)  
  document.testimage.document.write("<img   src="+imageurl[i_image]+"   border=0>")  
  document.close()  
  i_image++  
  if   (i_image   >=   imageurl.length)   {i_image=0}    
  var   timer=setTimeout("showimage()",2000)  
  }    
  }  
  function   hideimage()   {    
  if   (i_strngth   >=-10)   {  
  testimage.innerHTML="<img   style='filter:alpha(opacity="+i_strngth+")'   src="+imageurl[i_image]+"   border=0>";  
  i_strngth=i_strngth-10  
  var   timer=setTimeout("hideimage()",100)  
  }    
  else   {  
  clearTimeout(timer)  
  i_image++  
  if   (i_image   >=   imageurl.length)   {i_image=0}  
  i_strngth=1  
  var   timer=setTimeout("showimage()",500)    
  }  
  }  
  //-->  
  </script>  
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现随着滚轮滑动图片和文字淡入的效果,您可以使用CSS和JavaScript来完成。以下是一个示例代码: HTML: ```html <div class="container"> <div class="fade-in"> <img src="your-image.jpg" alt="Your Image"> <h1>Your Text</h1> </div> </div> ``` CSS: ```css .container { height: 100vh; overflow: hidden; } .fade-in { opacity: 0; transition: opacity 0.5s ease; transform: translateY(50px); } .fade-in.active { opacity: 1; transform: translateY(0); } ``` JavaScript: ```javascript window.addEventListener('scroll', function() { var fadeInElements = document.querySelectorAll('.fade-in'); for (var i = 0; i < fadeInElements.length; i++) { var element = fadeInElements[i]; var position = element.getBoundingClientRect().top; var windowHeight = window.innerHeight; if (position < windowHeight) { element.classList.add('active'); } } }); ``` 在上述代码中,我们首先将图片和文字放置在一个容器中,并为容器设置适当的样式。然后,我们使用CSS定义了淡入效果的初始状态和动画效果。每个需要淡入的元素都具有`.fade-in`类,并具有初始的透明度和位移。我们还定义了一个`.active`类,它会在元素进入视窗范围内时触发淡入效果。 在JavaScript部分,我们监听滚轮滚动事件,并遍历每个`.fade-in`元素。通过获取元素的位置信息,并与视窗高度进行比较,如果元素进入视窗范围内,就给它添加`.active`类,触发淡入效果。 请注意,您需要将代码中的`your-image.jpg`替换为实际图片的路径,以及`Your Text`替换为您要显示的实际文本。 希望这可以帮助到您!如果您有任何其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值