java学习---前端---使用JavaScript和jQuery实现图片轮播图

最新推荐文章于 2022-04-19 13:40:21 发布

杨小冥

最新推荐文章于 2022-04-19 13:40:21 发布

阅读量562

点赞数 1

分类专栏：前端文章标签： javascript jquery

本文链接：https://blog.csdn.net/yxmoar/article/details/109348185

版权

本文介绍了如何使用JavaScript和jQuery创建图片轮播图。任务包括HTML+CSS布局、定时轮换、鼠标事件控制轮换、左右按钮点击及圆点点击切换。通过引入jQuery库，实现了更简洁的轮播图功能。

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

图片轮播图

示例：京东商城
开发工具：VSCode
任务要求：

使用 HTML+CSS 布局出如上图所示页面效果。
嵌入代码，定时轮换显示图片。
添加鼠标移入移出事件，完成暂停和继续轮换效果。
为左右按钮添加点击事件，完成手动轮换商品图片效果展示。
完成左下角圆点点击轮换商品图片展示。

在这里插入图片描述

使用JavaScript方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播</title>
    <style>
    	/*设置内外填充0像素*/
       *{
    margin: 0px;padding: 0px;}
       body{
    
           user-select: none;
       }
       .out{
    
       		/*设置相对位置*/
           position: relative;
           width: 800px;
           height: 450px;
           margin: 20px auto;

       }
       .out.did{
    
       		/*设置绝对位置*/
           position: absolute;
           width: 100%;
           height: 100%;
       }
        img{
    
           position: absolute;
           /*透明度*/
           opacity: 0;
       }
        img.on{
    
           opacity: 1;
       }

       .left,.right{
    
           position: absolute;
           top: 50%;
           width: 30px;
           margin-top: -30px;
           font-size: 24px;
           text-align: center;
           line-height: 30px;
           background-color: rgba(0, 0,0, 0.5);
           color: rgb(248, 243, 242);
           /*鼠标变化*/
           cursor: pointer;
           
       }
       /*设置button布局和美化曲率，100px效果等同于50%*/
       .left{
    
           left: 0;
           border-top-right-radius: 100px;
           border-bottom-right-radius: 100px;
       }
       .right{
    
           right: 0;
           border-top-left-radius: 100px;
           border-bottom-left-radius: 100px;
       }
       /*圆点布局*/
       .tab{
    
           position: absolute;
           bottom: 10px;
           left: 50%;
           transform: translateX(-50%);
       }
       .tab li{
    
           float: left;
           list-style: none;
           width: 14px;
           height: 14px;
           margin-right: 8px;
           border-radius: 50%;
           background-color: #ccc;
           cursor: pointer;
       }
       .tab li.on{
    
           background-color: salmon;
       }
    </style>
</head>
<body>
    <div class="out">
        <div id="did">
            <img class="on" src="./img/1.jpg" alt