JavaScript实现轮播图的播放

最新推荐文章于 2024-04-12 07:49:03 发布
最新推荐文章于 2024-04-12 07:49:03 发布
阅读量963 收藏 5
点赞数 2
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45191746/article/details/105923420
版权

网站常见的轮播图的实现(引入jQuery库)

1、在网站上常常可以看见自动播放的轮播图，导航下面的轮播图已是屡见不鲜的事了。
比如这种：
在这里插入图片描述
又如这种：
在这里插入图片描述

2、轮播图功能的设计：
①
设计的轮播图能在每2s自动播放一张图片，从第一张开始播放，播放完最后一张图片后又返回第一张播放，无限重复此过程。
在这里插入图片描述

②
点击下面的方块能切换至对应的图片，并且暂停(暂停后不自动播放下一张图片)显示该图片，离开方块时轮播图又从该位置自动播放。
在这里插入图片描述

③
点击左右两边的箭头能返回上一张、下一张图片，不暂停显示该图片，紧接着轮播图从该图片自动播放。
在这里插入图片描述

3、代码分布实现
html结构(记得引入jQuery库,库文件可从官网下载，也可在本博客底部分享的链接获取【含轮播图实现的全部代码】)
整体一个div，里面包含一个ul【ul下面是li包含5张图片】，然后是一个section【section里面也是ul，放5个小方块】，最后是存放左右两个箭头的div！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮廓图实现</title>
    <script src="jquery-3.4.1.js"></script>   <!--引入jQuery库-->
</head>
<body>
   
    <div id="box">
        <ul>
            <li><img src="./images/1.jpg"></li>
            <li><img src="./images/2.jpg"></li>
            <li><img src="./images/3.jpg"></li>
            <li><img src="./images/4.png"></li>
            <li><img src="./images/5.jpg"></li>
        </ul>
        <section>
            <ul class="num">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            
        </section>
        <div class="left hide"><</div>
        <div class="right hide">></div>
    </div>
</body>
</html>

加入css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮廓图实现</title>
    <script src="jquery-3.4.1.js"></script>   <!--引入jQuery库-->
    <style>
        ul,li,img{
            padding:0px;
            margin:0px;
            list-style: none;
        }
        #box{
            width:800px;
            height:400px;
            /* border:1px solid red; */
            position: absolute;
            top:5%;
            left:calc(50% - 400px);
            overflow: hidden;
        }
        #box>ul{
            width:4019px;
            height:400px;
            /* border: 1px solid yellow; */
        }
        #box>ul>li{
            display: inline;
        }
        #box>ul>li>img{
            width:800px;
            height:400px; 
        }
        #box>section{
            position: absolute;
            width:100px;
            height:20px;
            left:calc(50% - 100px / 2);
            bottom: 3.5%;
            /* border:1px solid red; */
        }
        .num>li{
            display: inline-block;
            margin-right: 2px;
            width:13px;
            height:13px;
            text-align: center;
            background-color: #ccc;
            cursor: pointer;
        }
        #box>div{
            width:30px;
            height:58px;
            /* border:1px solid red; */
            text-align: center;
            line-height: 58px;
            font-size: 24px;
            background-color: #000;
            opacity: 0.5;
            color:#ccc;
            cursor: pointer;
        }
        .left{
            position: absolute;
            left:0px;
            top:calc(50% - 58px / 2);
        }
        .right{
            position: absolute;
            right: 0px;
            top:calc(50% - 58px / 2);
        }
        .hide{
            display: none;
        }
        .num>.current{
            background-color:red;
        }
    </style>
</head>
<body>
   
    <div id="box">
        <ul>
            <li><img src="./images/1.jpg"></li>
            <li><img src="./images/2.jpg"></li>
            <li><img src="./images/3.jpg"></li>
            <li><img src="./images/4.png"></li>
            <li><img src="./images/5.jpg"></li>
        </ul>
        <section>
            <ul class="num">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            
        </section>
        <div class="left hide"><</div>
        <div class="right hide">></div>
    </div>
</body>
</html>

初步实现后：
在这里插入图片描述
加入JavaScript代码：

 <script>
         var i=0;
         var timer;
        // 开启轮播
        function startLunBo(i){
            $("#box>ul>li").eq(i).show().siblings("li").hide();
            $("#box>section>ul>li").eq(i).addClass("current").siblings().removeClass("current");
        }
        
        function autoBo(){
            timer = setInterval(function(){
                i++;
                if(i==5){
                    i=0;
                }
                startLunBo(i);
            },2000)
        }

        //页面加载事件
        $(function(){
            autoBo();   //自动播放
            // 鼠标放上去事件
            $(".num>li").mouseover(function(){
                clearInterval(timer);    //停止轮播
                i=$(this).index();      //获取当前图片下标索引
                startLunBo(i)
            })

            // 鼠标离开事件
            $(".num>li").mouseout(function(){
                i=$(this).index();      //获取当前图片下标索引
                autoBo();         //开启自动播放
            })

            $("#box").hover(function(){
                $(".hide").css("display","block");
            },function(){
                $(".hide").css("display","none");
            })

            // 向左切换图片
            $(".left").click(function(){
                clearInterval(timer);
                i--;
                if(i==-1){
                    i=4;
                }
                startLunBo(i)
                autoBo();         //开启自动播放
            })
            // 向右切换图片
            $(".right").click(function(){
                clearInterval(timer);
                i++;
                if(i==5){
                    i=0;
                }
                startLunBo(i)
                autoBo();         //开启自动播放
            })
        })

    </script>

4、总体代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮廓图实现</title>
    <script src="jquery-3.4.1.js"></script>   <!--引入jQuery库-->
    <style>
        ul,li,img{
            padding:0px;
            margin:0px;
            list-style: none;
        }
        #box{
            width:800px;
            height:400px;
            /* border:1px solid red; */
            position: absolute;
            top:5%;
            left:calc(50% - 400px);
            overflow: hidden;
        }
        #box>ul{
            width:4019px;
            height:400px;
            /* border: 1px solid yellow; */
        }
        #box>ul>li{
            display: inline;
        }
        #box>ul>li>img{
            width:800px;
            height:400px; 
        }
        #box>section{
            position: absolute;
            width:100px;
            height:20px;
            left:calc(50% - 100px / 2);
            bottom: 3.5%;
            /* border:1px solid red; */
        }
        .num>li{
            display: inline-block;
            margin-right: 2px;
            width:13px;
            height:13px;
            text-align: center;
            background-color: #ccc;
            cursor: pointer;
        }
        #box>div{
            width:30px;
            height:58px;
            /* border:1px solid red; */
            text-align: center;
            line-height: 58px;
            font-size: 24px;
            background-color: #000;
            opacity: 0.5;
            color:#ccc;
            cursor: pointer;
        }
        .left{
            position: absolute;
            left:0px;
            top:calc(50% - 58px / 2);
        }
        .right{
            position: absolute;
            right: 0px;
            top:calc(50% - 58px / 2);
        }
        .hide{
            display: none;
        }
        .num>.current{
            background-color:red;
        }
    </style>
</head>
<body>
    <script>
        var i=0;
        var timer;
       // 开启轮播
       function startLunBo(i){
           $("#box>ul>li").eq(i).show().siblings("li").hide();
           $("#box>section>ul>li").eq(i).addClass("current").siblings().removeClass("current");
       }
       
       function autoBo(){
           timer = setInterval(function(){
               i++;
               if(i==5){
                   i=0;
               }
               startLunBo(i);
           },2000)
       }

       //页面加载事件
       $(function(){
           autoBo();   //自动播放
           // 鼠标放上去事件
           $(".num>li").mouseover(function(){
               clearInterval(timer);    //停止轮播
               i=$(this).index();      //获取当前图片下标索引
               startLunBo(i)
           })

           // 鼠标离开事件
           $(".num>li").mouseout(function(){
               i=$(this).index();      //获取当前图片下标索引
               autoBo();         //开启自动播放
           })

           $("#box").hover(function(){
               $(".hide").css("display","block");
           },function(){
               $(".hide").css("display","none");
           })

           // 向左切换图片
           $(".left").click(function(){
               clearInterval(timer);
               i--;
               if(i==-1){
                   i=4;
               }
               startLunBo(i)
               autoBo();         //开启自动播放
           })
           // 向右切换图片
           $(".right").click(function(){
               clearInterval(timer);
               i++;
               if(i==5){
                   i=0;
               }
               startLunBo(i)
               autoBo();         //开启自动播放
           })
       })

   </script>
    <div id="box">
        <ul>
            <li><img src="./images/1.jpg"></li>
            <li><img src="./images/2.jpg"></li>
            <li><img src="./images/3.jpg"></li>
            <li><img src="./images/4.png"></li>
            <li><img src="./images/5.jpg"></li>
        </ul>
        <section>
            <ul class="num">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            
        </section>
        <div class="left hide"><</div>
        <div class="right hide">></div>
    </div>
</body>
</html>

本博客代码所用的jQuery文件和图片及其源代码：

链接：https://pan.baidu.com/s/1jVPt8eJNFESYv_DtK-etoQ
提取码：ro0p
复制这段内容后打开百度网盘手机App，操作更方便哦

Darlen、阳仔
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用 setInterval 完善轮播图
weixin_48732879的博客
10-19 499
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0px; padding: 0px; } #outer { /*width: ; 图片宽度 */ /*height: ; 图片高度 */ margin: 50px a
JavaScript实现轮播图
再中二也会被现实打败
10-16 223
JavaScript实现轮播图
使用JS来实现轮播图的效果
weixin_64965154的博客
05-25 7537
第一步我们先获取三个元素，toggle()是一个方法调用，我是把左边和右边的写在一个方法，显示更加美观，，然后呢我们执行右侧按钮业务，还是先获取右侧按钮，然后定义一个信息量i=0。3，最后讲一个功能，这里我们依旧是在定时器上面声明一个变量，因为我们定时器也是有一直在懂，所以我们来这块设定一个点击事件。但是当我们轮播图到了最后一个，需要往返第一个，这时候我们需要判断，如果到了素组下标为8的时候，我们就得返回第一个。第一个是鼠标经过停止事件，第二个是开始事件，这样呢我们一个完整的轮播图就做出来了。
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
最新发布
2401_84138927的博客
04-12 2380
一： 轮播图的基本结构搭建及原理分析其实轮播图的构成很简单，仅由显示区域和图片区域两部分组成，图片区域由一个 ul 标签实现，内部一个 li 标签里放一张图片，使其左浮动形成一行，其移动其实靠的就是 ul 的二： 光标移动至轮播图处切换按钮的显示与隐藏光标移动到轮播图区域使左右切换图片按钮显示与隐藏，我们用到两个事件分为：和，之所以不用 mouseover 和 mouseout 是因为这两个事件会冒泡，会产生很多不可控的影响，但两组事件的效果几乎完全相同。绑定事件后改变按钮的 display 值即可。
js实现自动轮播效果【两种方式】
qq_57218855的博客
09-02 4268
js图片动画效果
js实现轮播图自动轮播
weixin_47619284的博客
08-16 9681
js实现轮播图自动轮播
原生JavaScript实现轮播图
qq_42265289的博客
08-02 470
实现原理 通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;link rel="stylesheet" type="text/css" href=
JavaScript实现图片轮播组件代码示例
10-21
本篇文章主要介绍了JavaScript实现图片轮播组件代码示例，对图片轮播效果感兴趣的小伙伴们可以参考一下。
前端JavaScript实现轮播图效果
04-11
最后，我们需要编写JavaScript代码来实现轮播图的动态切换和交互功能。在`slide.js`文件中，我们可以创建一个定时器来自动切换图片，并添加点击事件来允许用户手动切换。以下是一个基本的实现： ```javascript let ...
详解JavaScript实现动态的轮播图效果
10-17
JavaScript 实现动态轮播图是一种常见的网页交互效果，它能够为用户提供流畅的图像展示体验，通常用于产品展示、幻灯片等场景。本篇文章将深入探讨如何使用 JavaScript 实现这一功能，结合示例代码帮助读者理解和...
JavaScript实现简单图片轮播效果
10-19
主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现图片轮播共3页.pdf.zip
11-22
在本主题中，“javascript实现图片轮播”涉及到的是使用JavaScript技术来创建一个自动或手动切换的图片展示功能，通常用于网站的首页或者产品展示区域。这种轮播效果可以提升用户体验，使网站更具吸引力。 首先，...
html菜鸟教程轮播图自动播放,如何实现轮播图？
weixin_33236271的博客
05-30 9654
1.背景介绍轮播图，是由网页banner进化而来，通常放在屏幕最显眼的位置，以大图显示。随着互联网的发展，网页中需要推广的信息越来越多，宣传信息都欲占据黄金位置，最后相互妥协，轮播图应运而生。总而言之，轮播图就是可以切换的一块信息。2.知识剖析咱们先来看几个例子：由例可见，轮播图一般由logo，底部指示器和左右切换按键组成。3.常见问题如何制作轮播图？4.解决方案制作轮播图的方法有两种:css轮播...
如何使用JS实现轮播图
qq_60504665的博客
11-11 1735
当我们开始学习js后，终于要实现的轮播图了。但是这时我们难免会有些没有思路，所以我在此为大家提供一些轮播图的思路。首先，我们想要做轮播图，需要了解一些所需要的相关方法。
利用JavaScript实现轮播图(功能:图片自动播放,鼠标悬停,点击按钮进行左右切换)
W2399755751的博客
01-18 1957
【代码】利用JavaScript实现轮播图(功能:图片自动播放,鼠标悬停,点击按钮进行左右切换)
简易实现无缝切换自动轮播
神膘护体小月半的博客
06-12 749
JS+CSS 实现无缝切换自动轮播图
JavaScript表单校验
mqingo的博客
11-11 956
确认事件             事件触发函数             函数操作元素                          校验用户名                 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示                     事件: 焦点事件 onfocus                     触发函数                     ...
javascript实现图片轮播
06-07
可以通过以下代码实现Javascript图片轮播： HTML: ```html ``` CSS: ```css #slider { width: 500px; height: 300px; overflow: hidden; position: relative; } .sliderImg { position: absolute; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值