简单方法的让图片自动切换

<script language =javascript >

var curIndex=0;//时间间隔 单位毫秒

var timeInterval=1000;

var arr=new Array();

arr[0]=图片地址;

arr[1]=图片地址;

arr[2]=图片地址;

setInterval(changeImg,timeInterval);

function changeImg()

{   

var obj=document.getElementById("obj");   

 if (curIndex==arr.length-1)   

{       curIndex=0;    }   

else     {        curIndex+=1;   }   

obj.src=arr[curIndex];}

</script>  

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Javascript中,可以通过事件监听和DOM操作来实现让图片跟着滚动条自动切换的效果。下面是一个简单的实现方式: 首先,在HTML中创建一个包含多张图片的容器,如div,并给容器设置一个固定的高度和宽度,以及overflow属性为hidden,以隐藏溢出的内容。 然后,在Javascript中监听窗口滚动事件,当滚动条滚动时触发相应的处理函数。可以使用window对象的scroll事件来监听滚动条的滚动。 接下来,在处理函数中,可以通过获取滚动条的滚动距离来判断何时切换图片。可以使用window对象的pageYOffset属性获取当前滚动条的垂直滚动距离。 根据滚动条的滚动距离计算出当前应该显示的图片索引,然后通过DOM操作改变容器中图片的显示状态。可以使用style属性的display属性来控制图片的显示和隐藏。 最后,将处理函数绑定到scroll事件上,以实现滚动时自动切换图片的效果。 以下是一个简单的示例代码: HTML部分: ``` <div id="imageContainer"> <img src="image1.jpg" alt="image1"> <img src="image2.jpg" alt="image2"> <img src="image3.jpg" alt="image3"> </div> ``` Javascript部分: ```javascript window.addEventListener('scroll', function() { var container = document.getElementById('imageContainer'); var images = container.getElementsByTagName('img'); var scrollDistance = window.pageYOffset; var imageIndex = Math.floor(scrollDistance / (container.offsetHeight / images.length)); // 隐藏所有图片 for (var i = 0; i < images.length; i++) { images[i].style.display = 'none'; } // 显示当前应该显示的图片 images[imageIndex].style.display = 'block'; }); ``` 这样,当滚动条滚动时,图片会根据滚动条的位置自动切换。可以根据实际需要调整代码来实现更复杂的效果,例如添加动画、延迟切换等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值