javaScript+CSS+html【练习题】轮播图（踩坑记录：JS循环绑定事件）

最新推荐文章于 2023-02-18 14:57:17 发布

辣辣写代码_nanaProgrammer

最新推荐文章于 2023-02-18 14:57:17 发布

阅读量591

点赞数 2

文章标签： javascript js css html

本文链接：https://blog.csdn.net/qq_39455275/article/details/108672597

版权

javaScript+CSS+html【练习题】轮播图

题目
代码实现
效果展示
踩坑记录：JS循环绑定事件

题目

完成京东官网首页中轮播图效果。点击进入：京东首页
具体要求：
要求每隔 3 秒图片会自动切换一张，以此类推按照给定图片数量轮番切换播放。
当鼠标移入时会自动暂停播放，鼠标移出则会继续。
如下图两边有两个左右方向的按钮，点击则会实现手动切换商品图片。
左下角会按照图片数量显示对应的灰色圆点，点击会显示对应的图片，并圆点加亮显示。
在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS实现轮播图</title>
    <style>
        div,img,ul,li{
    margin:0px;padding:0px;}
        #did{
    
            width:400px;
            height:400px; 
            /*内部采用相对定位*/
            position: relative;
            /*超出的部分隐藏*/
            overflow:hidden;
            
        }
        /*页面刚加载时，只显示第一张图片*/
        #did img{
    display:none;}
        #did img:first-child{
    display:block}

        /* 左右箭头  */
        .arrowhead-left,
        .arrowhead-right {
    
            position: absolute;
            width: 40px;
            height: 40px;
            font-size: 30px;
            line-height: 35px;
            text-align: center;
            color:white;
            background-color: rgba(0,0,0,.2);
            border-radius: 20px 20px 20px 20px;

            top:180px;/*400/2-40/2*/
            cursor: pointer;
            
        }
        .arrowhead-right {
    
            left:370px;/*400-30*/
        }
        .arrowhead-left{
    
            right:370px;/*400-30*/
        }
 
        /* 小圆点所在的容器 */
        #radius {
     
            position:absolute;          
            width: 380px;

最低0.47元/天解锁文章

辣辣写代码_nanaProgrammer

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
javaScript+CSS+html【练习题】轮播图（踩坑记录：JS循环绑定事件）

javaScript+CSS+html【练习题】轮播图题目代码实现效果展示踩坑记录：JS循环绑定事件题目完成京东官网首页中轮播图效果。点击进入：京东首页具体要求：要求每隔 3 秒图片会自动切换一张，以此类推按照给定图片数量轮番切换播放。当鼠标移入时会自动暂停播放，鼠标移出则会继续。如下图两边有两个左右方向的按钮，点击则会实现手动切换商品图片。左下角会按照图片数量显示对应的灰色圆点，点击会显示对应的图片，并圆点加亮显示。代码实现<!DOCTYPE html><html
复制链接

扫一扫