JS实现轮播图片——JS每日一练1

最新推荐文章于 2024-11-25 14:45:25 发布

原创

最新推荐文章于 2024-11-25 14:45:25 发布 · 1w 阅读

标签

#JS

本文详细介绍了如何使用JavaScript实现轮播图片的功能，包括HTML结构、CSS样式和JS实现细节，如点击箭头切换、鼠标移入移出的自动切换控制、底部按钮样式变换以及点击按钮切换图片。同时，提供了扩展实例——模拟B站登录处的弹幕效果，并给出了源码下载链接。

前言：我之前在学JavaScript的时候，基本上都是看的《JavaScript高级程序设计》，而锻炼JS的例子也基本上是书上的小例子，每章看完了也很容易忘记一些知识点，缺乏实战的锻炼，于是就在网上找一些实例做做并且根据例子做一些拓展实例会比单纯的了解理论知识好多了，于是就有了这个专题文章《JavaScript实例每日一练》，和我一起通过实例深入了解JavaScript的“奥秘”吧，本专题文章不定期更新~

JS实现轮播图片

一、简单介绍

轮播图片是一组为了向浏览网页的用户展示图片信息的会自动播放的图片。在许多网站中你都会看到它的身影。
例如：

前端网

二、特点

轮播图片一般具备以下几个特点：
1、点击左右两边的箭头切换图片
2、当鼠标移出图片范围，自动切换下一张图片；当鼠标移入图片范围，停止切换下一张图片
3、切换到某一张图片时，底部的按钮样式也跟着改变
4、点击按钮即会切换到相应位置的图片

三、轮播图片原理

一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。
图片描述
图片来源：https://www.cnblogs.com/LIUYANZUO/p/5679753.html

四、让我们开始吧

本次实例的最终效果为（点击链接查看）：
https://augustwuli.github.io/JSDaily/PlayImage/

文件目录
-index.html
-main.css
-main.js

1、HTML结构

index.html
首先我们用父容器“container”存放所有的内容，子容器“list”存放图片，子容器“buttons”存放按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实现简单的轮播图片</title>
        <link rel="stylesheet" href="css/main.css" />
    </head>
    <body>
        <div id="container">
            <div id="list" style="left:0px">
                <img src="img/1.png" alt="1"/>
                <img src="img/2.png" alt="2"/>
                <img src="img/3.png" alt="3"/>
                <img src="img/4.png" alt="4"/>
                <img src="img/5.png" alt="5"/>
            </div>
            <div id="buttons">  
                <span index="1" class="on"></span>  
                <span index="2"></span>

最低0.47元/天解锁文章