运用jQuery写一个超简单的点击轮播图

Myth丶恋晨 2022-04-16 02:37 205阅读 0赞

# 运用jQuery写一个超简单的点击轮播图 #

### 一、css样式 ###

> 这里应该用五张图片放在对应的位置  
> img文件下分别是a.jpg、b.jpg、c.jpg、d.jpg、e.jpg图片  
> 可以对应的调节div的大小

<style> div{ position:relative;width:800px;}
    div div{ width:800px;height:300px;position:absolute;}
    div div:nth-of-type(1){ background-image:url("img/a.jpg");background-size:100% 100%;}
    div div:nth-of-type(2){ background-image:url("img/b.jpg");background-size:100% 100%;}
    div div:nth-of-type(3){ background-image:url("img/c.jpg");background-size:100% 100%;}
    div div:nth-of-type(4){ background-image:url("img/d.jpg");background-size:100% 100%;}
    div div:nth-of-type(5){ background-image:url("img/e.jpg");background-size:100% 100%;}
    button{ width:100px;height:50px;position:absolute;border:none;right:25px;cursor:pointer;}
    button:focus{ outline:3px solid #f0f;}
    button:nth-of-type(1){ background-image:url("img/a.jpg");background-size:100% 100%;}
    button:nth-of-type(2){ background-image:url("img/b.jpg");background-size:100% 100%;}
    button:nth-of-type(3){ background-image:url("img/c.jpg");background-size:100% 100%;}
    button:nth-of-type(4){ background-image:url("img/d.jpg");background-size:100% 100%;}
    button:nth-of-type(5){ background-image:url("img/e.jpg");background-size:100% 100%;}
    <style>

### 二、html标签 ###

> 五个div分别放五张图  
> 按钮是五张对应的小图

<div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <button></button>
        <button></button>
        <button></button>
        <button></button>
        <button></button>
    </div>

### 三、jQuery代码 ###

<script>
    $("div div:not(:first)").fadeOut(1);
    $("button").click(function(e){ 
       var arr=Array.from($("button"));
       var index=arr.indexOf(this);
       $("div div:visible").fadeOut(500);
       $("div div").eq(index).fadeIn(500);
    }).css("top",function(index){ 
       return 5+($(this).height()+5)*index+"px";
    })
    <script>

> **除了第一个div,其余的的都隐藏;**  
> **点击按钮时**  
> 1.arr数组中装五个按钮  
> 2.index是对应的按钮  
> 3.div下显示的div隐藏  
> 4.div下对应的div显示  
> *按钮的top值是(按钮的高度加上10乘以index)px;*

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现点击轮播图

效果图今天讲下如何利用js做个点击操作的轮播图，效果图如下，因为无法传视频，只能截图了，代码在下面讲解，需要可以自己打出来运行。 ![在这里插入图片描述][wate

谁践踏了优雅/ 2023年07月12日 05:12/ 0 赞/ 9 阅读

相关用JavaScript写一个简单的轮播图

用JavaScript写一个简单的轮播图首先我们先设置好结构和样式基本结构如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

心已赠人/ 2022年11月26日 10:57/ 0 赞/ 207 阅读

相关 html中简单轮播图实现原理,jQuery实现一个简单的轮播图

jQuery实现一个简单的轮播图发布时间：2020-08-25 02:23:35 来源：脚本之家阅读：100 作者：nameless-212 html代码：轮

逃离我推掉我的手/ 2022年10月05日 12:44/ 0 赞/ 283 阅读

相关简单的点击实现图片轮播~

第一次写博客，从十点开始说要来写，换了个头像，现在才开始码字。 `学习web前端时间并不多，还没毕业的自学小白，想要用博客来记录自己的学习史。` `有问题的任意吐槽~`

红太狼/ 2022年07月14日 09:08/ 0 赞/ 309 阅读

相关 jquery简单轮播图实现

其实轮播的代码很简单只需要20多行jq代码就可以实现了以下便是简单轮播的代码： <!DOCTYPE html> <html> <head

怼烎@/ 2022年06月10日 12:56/ 0 赞/ 333 阅读

相关 JQuery简单轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam

电玩女神/ 2022年05月31日 09:50/ 0 赞/ 301 阅读

相关运用jQuery写一个超简单的点击轮播图

运用jQuery写一个超简单的点击轮播图一、css样式 > 这里应该用五张图片放在对应的位置 > img文件下分别是a.jpg、b.jpg、c.jpg、d.j

Myth丶恋晨/ 2022年04月16日 02:37/ 0 赞/ 206 阅读

相关实现简单的轮播点击

实现简单的轮播点击 Html的主要代码：如图下\_ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

爱被打了一巴掌/ 2022年03月25日 11:58/ 0 赞/ 272 阅读

相关 jQuery实现一个简单的轮播图

一.轮播图内容组成包括：4张图片，图片标号，向左翻页，向右翻页的几个部分，如下图所示： ![watermark_type_ZmFuZ3poZW5naGVpdGk_sh

柔情只为你懂/ 2022年01月31日 06:57/ 0 赞/ 320 阅读

相关原生js+jquery实现轮播图+思路详解（超简单）

![轮播图的样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

矫情吗；*/ 2021年12月07日 14:07/ 0 赞/ 262 阅读