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

最新推荐文章于 2024-04-15 10:28:24 发布

怪力马猴烧酒

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量1w

点赞数 21

分类专栏： JS每日一练文章标签： JS

本文链接：https://blog.csdn.net/August_leo/article/details/80634095

版权

前言：我之前在学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=

最低0.47元/天解锁文章

怪力马猴烧酒

关注

21
点赞
踩
75

收藏

觉得还不错? 一键收藏
3
评论
JS实现轮播图片——JS每日一练1

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

扫一扫