用juqery实现的简单轮播图

最新推荐文章于 2022-04-24 22:23:51 发布
最新推荐文章于 2022-04-24 22:23:51 发布
阅读量142 收藏
点赞数
分类专栏： 前端 # JaveScript # JS的小案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38054172/article/details/102678093
版权

这几天一直有需要用到轮播图的需求。之前也没写过，索性自己写一个自己的轮播图轮子。

目前是实现了自动轮播，按左右箭头和序列点可以左右跳转和固定跳转图片。

感觉目前也没什么很缺的功能了，轮播图的要求大部分也就以上三点。

我的轮播图的实现思路是通过图片的显示隐藏配合图片的变换动画，我还有看到是通过调整图片条的显示范围来达到轮播图的效果和通过层级显示来达到相同效果的。

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图轮子</title>
    <script type="text/javascript" src="JS/jquery-3.4.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .lunbo-body {
            position: relative;
            max-width: 80%;
            height: 400px;
            margin: 200px auto;
        }

        .lunbo-content {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .lunbo-content >img{
            position: absolute;
            display: none;
            width: 100%;
            height: 100%;
            opacity: 1;
        }

        .lunbo-content .lunbo-content-img {
            position: absolute;
            display: block;
            opacity: 1;
            transition: 2S;
        }

        .lunbo-xulie {
            position: absolute;
            width: auto;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            padding: 0 10px;
            border: solid #FFF 1px;
            border-radius: 20px;
        }

        li {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: solid #FFF 1px;
            line-height: 8px;
        }

        .lunbo-xulie-son {
            background-color: #FFF;
        }

        .button-left {
            display: none;
            position: absolute;
            width: 50px;
            height: 80px;
            background-color: #EDEFF4;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            opacity: 0.3;
        }

        .button-right {
            display: none;
            position: absolute;
            width: 50px;
            height: 80px;
            background-color: #EDEFF4;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            opacity: 0.3;
        }
        .button-left img{
            position: absolute;
            width: 20px;
            height: 20px;
            top: 50%;
            transform: translateY(-50%);
        }
        .button-right img{
            position: absolute;
            width: 20px;
            height: 20px;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div class="lunbo-body">
    <div class="lunbo-content">
        <img src="image/MIX1.jpg" alt="第一张图片" class="lunbo-content-img">
        <img src="image/MIX2.jpg" alt="第二张图片">
        <img src="image/MIX3.jpg" alt="第三张图片">
        <img src="image/MIX4.jpg" alt="第四张图片">
        <img src="image/MIX5.jpg" alt="第五张图片">
    </div>
    <ul class="lunbo-xulie">
        <li class="lunbo-xulie-son"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="button-left"><img src="image/jiantou4.png"></div>
    <div class="button-right"><img src="image/jiantou3.png"></div>
</div>
</body>
<script>
    $(function () {
        var img = $('.lunbo-content img');
        var lis = $('.lunbo-xulie li');
        var ismore = 0;
        /*重置图片和序列的样式*/
        function clearImg() {
            for (var i = 0; i < img.length; i++) {
                img.removeClass('lunbo-content-img');
                lis.removeClass('lunbo-xulie-son');
            }
            img.eq(ismore).addClass('lunbo-content-img');
            lis.eq(ismore).addClass('lunbo-xulie-son');
        };
        /*循环执行样式的重置和判断是否循环完所有样式*/
        function doThing() {
            ismore++;
            if (ismore == img.length) {
                ismore = 0;
            }
            clearImg();
        };
        /*定时器3S一次*/
        var dingShiQi = setInterval(doThing, 2000);
        /*鼠标移入时*/
        $(".lunbo-body").mouseover(function () {
            clearInterval(dingShiQi);
            $('.button-left').css('display', 'block');
            $('.button-right').css('display', 'block');
        });
        /*鼠标移除*/
        $(".lunbo-body").mouseleave(function () {
            dingShiQi = setInterval(doThing, 2000);
            $('.button-left').css('display', 'none');
            $('.button-right').css('display', 'none');
        });
        /*上一张图片*/
        $('.button-left').on('click', function () {
            ismore -= 1;
            if (ismore <= -1) {
                ismore = 4;
            }
            img.removeClass('lunbo-content-img');
            lis.removeClass('lunbo-xulie-son');
            img.eq(ismore).addClass('lunbo-content-img');
            lis.eq(ismore).addClass('lunbo-xulie-son');
        });
        /*下一张图片*/
        $('.button-right').on('click', function () {
            ismore += 1;
            if (ismore >= 5) {
                ismore = 0;
            }
            img.removeClass('lunbo-content-img');
            lis.removeClass('lunbo-xulie-son');
            img.eq(ismore).addClass('lunbo-content-img');
            lis.eq(ismore).addClass('lunbo-xulie-son');
        });
        /*用序列行控制图片*/
        $("li").click(function () {
            var sum = $(this).index();
            img.removeClass('lunbo-content-img');
            lis.removeClass('lunbo-xulie-son');
            img.eq(sum).addClass('lunbo-content-img');
            lis.eq(sum).addClass('lunbo-xulie-son');
        });
    });
</script>
</html>

 

Start-ZJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery实现轮播图
刘小杨的博客
08-22 1万+
大家好，今天给大家带来的就是使用jQuery实现一个简单的轮播图，实现的原理就是： 1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏 2、获取图片的大小 为300，索引从0开始 3、当你点击右边的按钮时候，就要实现你点击的按钮的索引加1 让 索引加一乘以图片的大小+px 4、当他实现滑动的时候，加一个animate动画的效果，就欧了 5、右边的效果和左边的一样，都是同理 <!DOCTYPE html> <html lang="en"> <head>
用jquery实现图片轮播
老K的博客
07-16 1万+
CSS样式： *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; /*其实就是图片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; pos
jQuery实现轮播图
qq_45605563的博客
04-24 1279
超简单轮播图，全注释，加无缝滚动轮播图
关于juqery轮播图的详细介绍
xiaofan_queen的博客
06-18 417
关于juqery轮播图的详细介绍 html中记得引入jquery文件，这里的i标签可以用大于小于符号代替，代码如下： css： .grid-col2-l{ position: relative; width: 590px; height: 470px; padding-top: 10px; cursor: pointer; } .grid-col2-l .romap{ width: 100%; ...
jQuery实现轮播图效果
qianzihao007
12-25 5631
介绍：这里是我使用了计时器的方式实现图片每隔几秒切换然后添加了两个按钮用于上一张和下一张的切换 `1，导入jQuery文件 <script src="jquery-3.5.1.js"></script> 2，设置图片的样式 <style> *{ margin: 0; padding: 0; } #box{ width: 300px; .
jQuery实现各种轮播图
小白小白从不日别的博客
11-10 1万+
列举了Jquery实现的一些常见的轮播图
jQuery实现的简单图片轮播效果完整示例
11-29
在本文中，我们将深入探讨如何使用jQuery来实现一个简单的图片轮播效果。首先，我们要明白jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在这个实例中，我们将利用jQuery的特性...
使用JQuery实现图片轮播效果的实例(推荐)
10-19
在本文中，我们将探讨如何使用jQuery来实现一个基本的...总结来说，使用jQuery实现图片轮播效果是网页开发中常见且实用的技能。通过理解上述代码，你可以根据自己的需求进行调整和扩展，创建出更加个性化的轮播组件。
jquery简单实现图片切换效果的方法
12-03
本文将通过一个实例详细介绍如何使用jQuery实现简单的图片切换效果。首先，我们来分析一下提供的代码片段。 1. **HTML 结构**： - `<div id="slider">` 是整个图片轮播容器，设置了相对定位和一些样式。 - `...
jquery实现简单自动轮播图效果
10-15
本文将深入探讨如何使用 jQuery 实现一个简单的自动轮播图效果。 首先，我们来分析给出的 HTML 结构。轮播图的核心部分包含了一个 `id` 为 "box" 的容器，其中包含三个子元素：一个用于展示图片的 `ul`（class 为 ...
无缝轮播的实现与封装
huyao的博客
01-29 1614
轮播图在网页搭建中经常遇到, 与轮播有关的卡片滑块也常见,  所以有必要理解其中的原理 轮播图HTML中应包含几个部分? 视觉窗口,即可见区域包含所有图片的容器具体的每一张轮播图片锚点列表, 点击可跳到具体某一页左右切换按钮 让每一个轮播页大小刚好等于视图窗口大小 设置视图窗口宽度,  让超过的部分隐藏设置包含所有图片的容器的宽度为 10000%, 目的是为了让容器足够
jQuery实现轮播图的思路、代码及知识点！
xue_smail的博客
04-25 5330
jQuery是一个快速、简洁的JavaScript框架。它设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。的确啊，用jQ写轮播图比js写轮播图代码量少了许多呢！ 一、轮播图实现思路： 1、自动轮播： （1）使所有的图片...
采用jsp来实现一个轮播图
青之羽
11-05 2万+
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 轮播图的实现 /* 对全部标签对象进行初始化操作 */ *::selection {/*即点击全部的任何标签插件时都不会有背景颜色，因为默认的标签对象当中当进行多次点击操作时会出现背景色*/
jQuery实现轮播图(一)
梵海
07-24 2万+
轮播概念图 这里的轮播图的轮播方式是自动每隔一段时间向左移动一张图，循环滚动（还有变换透明度来实现轮播的）轮播图的原理很简单：设置一个div(box),给其相对定位并且overflow:hidden超出box的范围隐藏，里面包含一个ul，给其绝对定位，ul里面有多个li(li里面存放着轮播的图片，给li左浮动实现左右轮播效果)。每隔一段时间让ul向左移动一个li的width距离，这样图片就一张一张
用jquery来实现轮播图效果
xhdjdje的博客
04-14 5288
效果展示 首先就是布局，在这里面
jQuery实现轮播图（无缝轮播，附效果图），代码有详解。
热门推荐
qq_36996271的博客
08-25 2万+
jQuery实现轮播图的无缝衔接（附带原生JS版本） 刚学JQuery的时候，想着要做些什么来检验一下自己的学习成果，这时候在逛一些设计得比较优秀的网页的时候就看到了在主页上面不断切换的图片（当时不知道叫什么），这是我第一次对轮播图有了一些概念。于是就想能不能自己也做一个跟它效果一样的东西出来。遂在网上搜了资料，再结合自己所学过的JQuery知识，实现了一个无缝衔接轮播图的简单版本。 下面附上...
swiper轮播图在vue中实现显示3张图片,一个完整的两边显示一半
user-jianyong的博客
08-29 7472
swiper效果图,图片路径自己更改吧 <template> <div id="root" style="overflow: hidden"> <div class="swiper-container" > <div class="swiper-wrapper" > <div class...
jquery实现图片轮播
weixin_42536961的博客
07-08 114
HTML: <div class="box"> <ul class="image"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/4.jpg"></li> <li><img
实现简单的轮播图（单张图片、多张图片）
星河
02-09 2万+
前言 刚学js没多久，这篇博客就当做记录了，以后还会完善的，希望大佬们多多指点。ps:下面出现的都是直接闪动，没有滑动效果的轮播图。 单张图片的替换 · ...
用jquery实现无缝轮播图
最新发布
10-09
使用jQuery实现无缝轮播图可以通过以下步骤完成： 1. 创建HTML结构： ```html <li><img src="image1.jpg" alt="Image 1"> <li><img src="image2.jpg" alt="Image 2"> <li><img src="image3.jpg" alt="Image...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值