纯jQuery实现网页轮播图

最新推荐文章于 2024-09-28 11:04:27 发布

微白1

最新推荐文章于 2024-09-28 11:04:27 发布

阅读量3.2k

点赞数 3

分类专栏： js 文章标签： jquery

本文链接：https://blog.csdn.net/qq_38687915/article/details/78707680

版权

这篇博客适合初学者，作者分享了如何用jQuery编写一个简单的网页轮播图。HTML部分包括了首尾相同的图片以实现无缝过渡效果。CSS部分和jQuery代码也一并给出，虽然作者提到自己是菜鸟级别，但提供了详细的步骤和解说思路。

摘要由CSDN通过智能技术生成

初学者-菜鸟级别。直接上代码吧

①：HTML部分第一张图片和最后一张图片是一样的，这样做是为了实现从最后一张过渡到第一张，图片直接拿的是京东的链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <link rel="stylesheet" href="lunbo.css">
</head>
<body>
    <div class="box">
        <div class="img_list">
            <img class="img1" src="https://img13.360buyimg.com/da/jfs/t7606/15/4771093855/132890/5f055c11/5a0a49d8Nac7232c3.jpg" alt="">
            <img src="https://img14.360buyimg.com/da/jfs/t12241/114/347670663/76562/336432ea/5a096d57N09c765dc.jpg" alt="">
            <img src="https://img1.360buyimg.com/da/jfs/t11551/142/1785340879/196158/2354e0e0/5a094447N9ee98d86.jpg" alt="">
            <img src="https://img12.360buyimg.com/babel/jfs/t11884/62/1800646604/180354/fcc5f2d8/5a0a54aaN1e85ddbd.jpg" alt="">
            <img src="https://img20.360buyimg.com/da/jfs/t10597/214/1767280119/107853/e81bef25/59e5deffN82945fbf.jpg" alt="">
            <img src="https://img14.360buyimg.com/babel/jfs/t14050/118/403274213/590