最简单的JavaScript图片轮播代码(两种方法)(2).pdf资源-CSDN文库

版权申诉

115 浏览量 2021-09-13 19:45:28 上传评论收藏 68KB PDF 举报

在网页设计中，图片轮播是一种常见的交互元素，用于展示多张图片或内容。本文将介绍两种使用JavaScript实现最简单图片轮播的方法，特别适合初学者理解和实践。 **方法一：通过改变opacity属性** 这种方法的核心是利用JavaScript动态改变图片的透明度（opacity）来实现轮播效果。你需要准备多张图片作为轮播素材，并确保它们在同一位置重叠。然后，通过JavaScript定时器设置间隔时间，依次改变每张图片的透明度，当一张图片完全透明时，下一张图片的透明度逐渐增加，从而达到轮播效果。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> #slider {position: relative;} #slider img {position: absolute; opacity: 0; transition: opacity 1s ease-in-out;} </style> <script> function startSlideShow() { var images = document.querySelectorAll('#slider img'); var index = 0; setInterval(function() { images[index].style.opacity = 0; index = (index + 1) % images.length; images[index].style.opacity = 1; }, 3000); // 轮播间隔时间，单位为毫秒 } </script> </head> <body onload="startSlideShow()"> <div id="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> </body> </html> ``` **方法二：使用CSS和jQuery** 第二种方法结合了CSS的display属性和jQuery库，通过切换图片的显示状态来实现轮播。布局一个包含所有图片的`<div>`，并将其`display`属性设置为`none`。然后，使用jQuery选择器选中第一张图片并将其`display`属性设置为`block`。之后，添加上一张和下一张按钮，当用户点击这些按钮时，使用jQuery修改图片的显示状态。 ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #slider {width: 100%; height: 180px; background-color: white; position: relative; border-bottom: 1px solid gray;} #slider ul {height: 180px; list-style-type: none;} #slider ul li {width: 100%; height: 180px; margin: 0; padding: 0; display: none;} .ubl, .ubr {position: absolute; bottom: 20px; width: 80px; height: 20px; line-height: 20px; text-align: center; font-size: 16px; font-weight: bold; cursor: pointer;} .ubl {left: 40%;} .ubr {right: 40%;} .ubl:hover, .ubr:hover {background: yellow; border-radius: 10px;} </style> <script> $(document).ready(function() { var index = 0; $('#slider ul li').eq(index).show(); $('.ubl').click(function() { index--; if (index < 0) index = $('#slider ul li').length - 1; $('#slider ul li').hide().eq(index).show(); }); $('.ubr').click(function() { index++; if (index >= $('#slider ul li').length) index = 0; $('#slider ul li').hide().eq(index).show(); }); }); </script> </head> <body> <div id="slider"> <ul> <li><img src="image1.jpg" alt="Image 1"></li> <li><img src="image2.jpg" alt="Image 2"></li> <li><img src="image3.jpg" alt="Image 3"></li> </ul> <a href="#" class="ubl">上一张</a> <a href="#" class="ubr">下一张</a> </div> </body> </html> ``` 在这个例子中，我们使用了jQuery的`$(document).ready()`函数来确保DOM加载完成后再执行脚本。`.eq()`方法用于根据索引选择元素，`show()`和`hide()`用于控制元素的显示与隐藏。同时，添加了悬停效果，当鼠标经过上一张和下一张按钮时，背景色变为黄色并添加圆角。总结来说，这两种方法都提供了基本的图片轮播功能，但实现方式略有不同。第一种方法更依赖CSS动画，而第二种方法则结合了jQuery库，提供了更丰富的交互体验。在实际项目中，你可以根据需求选择合适的方法，或者结合两者以创建更加复杂的轮播效果。

资源推荐

资源详情

资源评论