首页jq图片轮播和点击切换代码

jq图片轮播和点击切换代码

时间: 2024-09-27 16:12:15 浏览: 61

JQ（jQuery）是一个流行的JavaScript库，常用于简化网页交互效果，包括图片轮播和点击切换功能。以下是使用JQ实现图片轮播的一个基本示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .slider { width: 800px; height: 400px; overflow: hidden; } .slider ul { list-style-type: none; padding: 0; margin: 0; display: flex; transition: transform 1s ease; } .slider li { width: 100%; height: 100%; } </style> </head> <body> <div class="slider"> <ul id="imageSlider"> <li><img src="image1.jpg" alt="Image 1"></li> <li><img src="image2.jpg" alt="Image 2"></li>  </ul> </div> <button id="prev">上一张</button> <button id="next">下一张</button> <script> $(document).ready(function() { let slideIndex = 0; showSlides(); function showSlides() { $("#imageSlider li").eq(slideIndex).fadeIn(1000); $("#imageSlider li").not(".active").fadeOut(1000); $("#next").click(function() { slideIndex++; if (slideIndex > $("#imageSlider li").length - 1) { slideIndex = 0; } showSlides(); }); $("#prev").click(function() { slideIndex--; if (slideIndex < 0) { slideIndex = $("#imageSlider li").length - 1; } showSlides(); }); } }); </script> </body> </html> ``` 在这个例子中，我们首先初始化了两个按钮`prev`和`next`，然后使用`showSlides`函数来控制轮播过程。通过改变`.slider ul`的`transform`属性（如平移），实现了图片的切换。

阅读全文