轮播图事件

最新推荐文章于 2024-08-06 10:43:32 发布
最新推荐文章于 2024-08-06 10:43:32 发布
阅读量177 收藏
点赞数 1
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l20040121_/article/details/128695883
版权

需求：
1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换。
实现原理：
1.获取需要用到的元素
2.设置光标移动箭头的出现与隐藏，声明所有li监听鼠标点击移动事件
3.rightbtn.click()将其添加在定时器中即可完成轮播
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    margin: 0;
    padding: 0;
}
.windows{
    position: relative;
    border: 3px rgb(146, 146, 146) solid;
    width: 700px;
    height: 450px;
    background-color: rgb(250, 186, 186);
    margin: 170px auto;
    overflow: hidden;
}
.leftbtn{
    z-index: 999;
     position: absolute;
     box-sizing: border-box;
     top: 195px;
     left: 0;
     width: 50px;
     height: 70px;
     background-color: rgba(136, 135, 135, 0.582);
     line-height: 70px;
     text-align: center;
     font-size: 35px;
     color: rgba(255, 255, 255, 0.609);
     cursor: pointer;
     display: none;
}
.leftbtn:hover{
    background-color: rgba(189, 186, 186, 0.623);
    color: aliceblue;
}
.rightbtn{
    z-index: 999;
     position: absolute;
     box-sizing: border-box;
     top: 195px;
     right: 0;
     width: 50px;
     height: 70px;
     background-color: rgba(136, 135, 135, 0.609);
     line-height: 70px;
     text-align: center;
     font-size: 35px;
     color: rgba(255, 255, 255, 0.596);
     cursor: pointer;
     display: none;
}
.rightbtn:hover{
    background-color: rgba(189, 186, 186, 0.623);
    color: aliceblue;
}
.imgbox{
   position:absolute;
   left: 0;
   top: 0;
    box-sizing: border-box;
    width: 700%;
    height: 450px;
}
.imgbox li{
    float: left;
    box-sizing: border-box;
    width: 700px;
    height: 450px;
    list-style: none;
}
.imgbox li a{
    box-sizing: border-box;
    display: inline-block;
    width: 700px;
    height: 450px;
    background-color: rgb(134, 152, 255);
}
.imgbox li a img{
    cursor:auto;
    width: 700px;
    height: 450px;
}
.circlebox{
    position: absolute;
    bottom: 0;
    width: 700px;
    height: 40px;
    background-color: rgba(94, 94, 94, 0.486);
 
}
.circle {
    position: absolute;
    bottom: 10px;
    left: 300px;
}
.circle li {
    float: left;
    width: 7px;
    height: 7px;
    list-style: none;
    border: 2px solid rgb(185, 185, 185);
    border-radius:100%;
    margin: 3px;
    cursor: pointer;
    background-color: rgb(173, 173, 173);
}
.circlecolor{
    background-color: coral !important;
    border: 2px solid coral !important;
}
    </style>
</head>
<body>
    <div class="windows">
        <div class="leftbtn"> < </div>
        <div class="rightbtn"> > </div>
        <ul class="imgbox">
            <li>
                <a href="#"><img src="./R-C.png" alt="" class="lunboimg"></a>
            </li>
            <li>
                <a href="#"><img src="./-C.png" alt="" class="lunboimg"></a>
            </li>
            <li>
                <a href="#"><img src="./R-C.png" alt="" class="lunboimg"></a>
            </li>
            <li>
                <a href="#"><img src="./-C.png" alt="" class="lunboimg"></a>
            </li>
            <li>
                <a href="#"><img src="./R-C.png" alt="" class="lunboimg"></a>
            </li>
            <li>
                <a href="#"><img src="./-C.png" alt="" class="lunboimg"></a>
            </li>
        </ul>
        <div class="circlebox">
               <ol class="circle"></ol>
        </div>
    </div>
    <script>
        window.addEventListener('load', function () {
    var leftbtn = document.querySelector('.leftbtn');
    var rightbtn = document.querySelector('.rightbtn');
    var windows = document.querySelector('.windows');
    var circleul = document.querySelector('.imgbox');
    var circleol = document.querySelector('.circle');
    //光标移动至轮播图区域按钮显示，移开隐藏，点击按钮的变化效果
    windows.addEventListener('mouseenter', function () {
        leftbtn.style.display = 'block';
        rightbtn.style.display = 'block';
        clearInterval(timer) //清除定时器自动播放
        timer = null;
    })
    windows.addEventListener('mouseleave', function () {
        leftbtn.style.display = 'none'
        rightbtn.style.display = 'none'
        timer = setInterval(function () {
            rightbtn.click();
        }, 2000)
    })
    leftbtn.addEventListener('click', function () {
        leftbtn.style.color = 'grey'
        var timer = setTimeout(function () {
            leftbtn.style.color = 'aliceblue'
        }, 100)
    })
    rightbtn.addEventListener('click', function () {
        rightbtn.style.color = 'grey'
        var timer = setTimeout(function () {
            rightbtn.style.color = 'aliceblue'
        }, 100)
    })
    //点击小圆圈可以滚动
    for (var i = 0; i < circleul.children.length; i++) {
        lis = document.createElement('li');
        lis.setAttribute('index', i);
        circleol.appendChild(lis);
        lis.addEventListener('click', function () {
            var currentindex = this.getAttribute('index'); //bug整改（3行）
            num = currentindex;
            circlechange = currentindex;
            for (var i = 0; i < circleol.children.length; i++) {
                circleol.children[i].className = '';
            }
            this.className = 'circlecolor';
            var imgwidth = windows.offsetWidth - 6;
            var long = this.getAttribute('index') * imgwidth;
            run(circleul, -long);
        })
    }
    circleol.children[0].className = 'circlecolor';
    //克隆第一张图片至末尾
    var firstimg = circleul.children[0].cloneNode(true);
    circleul.appendChild(firstimg);
 
    //右侧按钮点击滚动
    num = 0;
    circlechange = 0;
    rightbtn.addEventListener('click', function () {
        if (num == circleul.children.length - 1) {
            circleul.style.left = 0;
            num = 0;
        }
        num++;
        long = num * windows.offsetWidth - 6 * num;
        run(circleul, -long);
        //小圆圈跟着一起变化
        circlechange++;
        if (circlechange == circleul.children.length - 1) {
            circlechange = 0;
        }
        for (var i = 0; i < circleol.children.length; i++) {
            circleol.children[i].className = '';
        }
        circleol.children[circlechange].className = 'circlecolor';
    })
    //左侧按钮滚动
    leftbtn.addEventListener('click', function () {
        if (num == 0) {
            circleul.style.left = (circleul.children.length - 1) * windows.offsetWidth;
            num = circleul.children.length - 1;
        }
        num--;
        long = num * windows.offsetWidth - 6 * num;
        run(circleul, -long);
        //小圆圈跟着一起变化
        circlechange--;
        if (circlechange < 0) {
            circlechange = circleol.children.length - 1; //注意此处是ol的子节点的长度-1
        }
        for (var i = 0; i < circleol.children.length; i++) {
            circleol.children[i].className = '';
        }
        circleol.children[circlechange].className = 'circlecolor';
    })
    //自动播放
    var timer = setInterval(function () {
        rightbtn.click();
    }, 2000)
 
})
 
function run(obj, long, callback) {
    clearInterval(obj.timer)
    obj.timer = setInterval(function () {
        if (obj.offsetLeft == long) {
            window.clearInterval(obj.timer);
            if (callback) {
                callback();
            }
        } else {
            step = (long - obj.offsetLeft) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 20)
}
    </script>
</body>
</html>

效果展示：

QQ录屏20230115170029

l20040121_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
轮播图（javascript的事件）
weixin_41404058的博客
07-13 466
2
轮播图 dom事件
weixin_47492981的博客
05-08 178
html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <link rel="stylesheet" href="aa.css"> </hea...
轮播图经典案例、JavaScript事件
huangyh技术栈
09-01 2098
1.1 案例：实现轮播图 1.1.1 案例需求： 实现每过3秒切换一张图片效果，一共5张图片，当显示到最后1张的时候，再次显示第1张。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/
web前端学习--API事件（附轮播图完整版，随机点名案例，tab栏切换）
lyl20040822的博客
04-19 391
结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。`addEventListener` 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】`click` 译成中文是【点击】的意思，它的含义是监听（等着）用户鼠标的单击操作，除了【单击】还有【双击】`dblclick`事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。focus 获得焦点。
swiper中常用的事件方法
热门推荐
Insideo的博客
01-08 1万+
通常我们写轮播图都会涉及到swiper这个插件库，但是很多人不知道怎么用，往往踩了很多坑，下面就举一些swiper中常用的事件方法来说： 去下一个slide： this.mySwiper= new Swiper(".mySwiper", { } this.mySwiper.slideTo(n) 例如：给需要某一dom绑定点击事件，要跳到固定的slide就可使用slideTo 了。 swiper中页面改变事件，就是滑动轮播触发该事件，有以下3种： //slideChangeT
js 层叠轮播图
03-18
层叠轮播图是一种常见的网页动态效果，常用于展示多张图片或内容，通过滑动的方式呈现，使得页面更具吸引力和交互性。在JavaScript中实现层叠轮播图，主要涉及以下几个关键知识点： 1. HTML 结构：首先，我们需要一...
android 轮播图实现
06-20
3. 增加点击事件：用户点击轮播图时可以跳转到相应的详情页面。 4. 自动播放与手动滑动的切换：当用户手动滑动时，停止自动播放，用户松手后恢复自动播放。 5. 错误处理：当加载图片失败时，显示占位符或者错误提示...
轮播图轮播图轮播图轮播图轮播图
11-08
轮播图，也被称为滑动图片展示或旋转木马，是一种常见的网页设计元素，用于在有限的空间内展示多个图像或内容。它通常被用于网站的首页，用来吸引用户的注意力，展示产品、服务或者活动信息。轮播图的设计和实现涉及...
轮播图 Html javascript
09-19
在网页设计中，轮播图是一种常见的元素，用于展示多张图片或内容并实现自动循环播放的效果，常用于广告宣传或者焦点图展示。本项目利用HTML、JavaScript技术实现了这一功能，下面将详细介绍其中的关键知识点。 1. ...
轮播图_轮播图_
10-01
【标题】：JavaScript实现轮播图 在网页设计中，轮播图是一种常见的展示多张图片或内容的方式，它能够以动态的形式展示信息，既节省空间又富有视觉吸引力。本教程将详细介绍如何使用JavaScript实现一个基本的轮播图...
用js之事件实现轮播图
axxxxuuu的博客
09-15 275
用js之事件实现轮播图 需求：点击轮流更换图片 效果图： <style> .box { position: relative; width: 350px; height: 350px; background-color: #00a; margin: 50px auto; background-image: url('./image/b1
自动轮播事件
weixin_44552543的博客
05-09 148
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> *{ padding: 0px; ...
jQuery -- touch事件之轮播图效果
删库跑路
06-28 2454
废话不多说，下面放代码，注释很详细，不怕看不懂 效果图预览：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-
Android 轮播图的实现 自动+手动滑动+指示+点击事件
hzqit520的博客
03-24 7427
1.图片加载框架 compile 'com.github.bumptech.glide:glide:3.5.2' 2.一个先写一个布局  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
轮播图案例
Galaksen的博客
08-24 2384
1.简单的轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的轮播图</title> <style> ul { list-style: none;...
实现轮播模拟点击事件
柚稚的博客
12-14 544
$(document).ready(function(){ // 轮播图 var slideShow=$("#pageContent"); //获取最外层框架的名称 showNumber=slideShow.find("#BA_432116553337908 .BAbuttonElement");//获取按钮 window.clearInterval(timer);...
前端面试宝典【CSS篇】【5】
最新发布
BDawn的专栏
08-06 225
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
touch事件实现轮播图
10-29
通过touch事件实现轮播图的步骤如下： 1. 给ul注册touch相关的三个事件：touchstart、touchmove、touchend。 2. 在touchstart中，记录开始的位置，清除定时器。 3. 在touchmove中，记录移动的距离，清除过渡，让ul...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值