首页html页面实现图片自动滑动源代码

html页面实现图片自动滑动源代码

时间: 2023-10-15 15:08:12 浏览: 157

这是一个简单的图片自动滑动的HTML、CSS和JavaScript代码，你可以在本地创建一个HTML文件，将代码复制进去并保存，然后用浏览器打开该HTML文件，就可以看到图片自动滑动的效果了。 HTML代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片自动滑动</title> <style> .slider-container { width: 800px; height: 400px; overflow: hidden; position: relative; } .slider-container img { width: 800px; height: 400px; position: absolute; top: 0; left: 0; } .slider-container img:first-child { animation: slide 5s infinite; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-800px); } } </style> </head> <body> <div class="slider-container"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div> <script> setInterval(function() { var firstImg = document.querySelector('.slider-container img:first-child'); var imgWidth = firstImg.offsetWidth; firstImg.style.transform = 'translateX(-' + imgWidth + 'px)'; setTimeout(function() { firstImg.remove(); document.querySelector('.slider-container').appendChild(firstImg); firstImg.style.transform = 'translateX(0)'; }, 5000); }, 5000); </script> </body> </html> ``` 这个示例代码中，图片容器的宽度设为800px，高度设为400px，图片的位置使用绝对定位，并且通过animation和@keyframes来实现轮播动画。JavaScript代码中使用setInterval来定时触发轮播效果，每次轮播时，将第一张图片从左向右平移，然后将其添加到容器的末尾，形成循环滚动的效果。

阅读全文