js轮播图有,移入移出事件,左右滑动事件功能

2024-06-15 06:36

本文主要是介绍js轮播图有,移入移出事件,左右滑动事件功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果图:

具体代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>* {margin: 0;padding: 0;}.banner {width: 100%;height: 500px;overflow: hidden;position: relative;}.tow {width: 600%;height: 500px;margin-left:0%;display: flex;display: relative;/* transition: 1s all ; */}.tow img {width: 100%;height: 100%;}.five {position: absolute;bottom: 0px;left: 50%;transform: translateX(-50%);display: flex;bottom: 0;border: 1px solid lightgray;}.five span {width: 15px;height: 15px;display: block;background-color: antiquewhite;border-radius: 50%;display: flex;}.but {width: 100%;height: 30px;position: absolute;border-radius: 50%;top: 37%;display: flex;justify-content: space-between;}.but span {display: none;background-color: aqua;}.banner:hover .but span {display: block;}
</style>
<body>
<div class="banner"><div class="tow"><img src="img/ou.jpg" alt="" class="mlShow"><img src="img/oui.jpg" alt=""><img src="img/tu.jpg" alt=""><img src="img/opp.jpg" alt=""><img src="img/iu.jpg" alt="" /><img src="img/yu.jpg" alt="" /></div><div class="five"></div><div class="but"><span>&lt;</span><span class="one">&gt;</span></div>
</div>
<script>let banner = document.getElementsByClassName('banner')[0];//获取所有内容的标签let tow = document.getElementsByClassName('tow')[0];//获取所有图片的标签let img = tow.children; //获取图片子元素let imgWidth = img[0].offsetWidth;//图片宽度自适应let five = document.getElementsByClassName('five')[0];//获取所有小圆点的标签let but = document.getElementsByClassName('but')[0];//获取所有按钮的标签let butItem = but.children;//获取按钮子元素let index = 0;//初始下标为零let times = setInterval(scrolls, 2000); //设置定时器// 动态生成小圆点for (let i = 0; i < img.length; i++) {let dot = document.createElement('span'); // 创建一个 span 元素dot.classList.add('dot'); // 添加 dot 类名five.appendChild(dot); // 将创建的小圆点添加到五个按钮的容器中}function scrolls() {  //设置轮播函数console.log(index);if (index < img.length - 1) {//判断当前页的长度,如果小于img图片的长度index++;  //自增至最后一张图片tow.style.marginLeft = -index * imgWidth + "px";} else { //不小于3变为0第一张index=0  //跳转至轮播初始位置tow.style.marginLeft = -index * imgWidth + "px";}console.log(index);// 修改小圆点颜色let span = five.children;for (let i = 0; i < span.length; i++) {//循环小圆点span[i].style.backgroundColor = "rgba(255, 255, 255, 0.6)"; //将其背景颜色变为白色}span[index].style.backgroundColor = "rgba(0, 0, 255, 0.6)";//图片轮播到第几张时把对应的小圆点变为蓝色}//鼠标移入banner.onmouseover = function() {clearInterval(times); //清除定时器}// 鼠标移出banner.onmouseout = function() {times = setInterval(scrolls, 2000);//开启定时器butItem[0].onclick = function() {//按钮绑定点击事件if (index > 0) {index--;} else if(index==0) {index = img.length - 1; //随后一张图片}tow.style.marginLeft = -index * imgWidth + "px";for (let i = 0; i < span.length; i++) {span[i].style.backgroundColor = "rgba(255, 255, 255, 0.6)";}span[index].style.backgroundColor = 'rgba(0, 0, 255, 0.6)';//同上}}butItem[1].onclick = scrolls; //向右点击调用轮播函数
</script>
</body>
</html>

具体的轮播可以根据需求进行调整;希望可以帮到大家;

这篇关于js轮播图有,移入移出事件,左右滑动事件功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1062687

相关文章

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

《SpringCloud使用Nacos配置中心实现配置自动刷新功能使用》SpringCloud项目中使用Nacos作为配置中心可以方便开发及运维人员随时查看配置信息,及配置共享,并且Nacos支持配... 目录前言一、Nacos中集中配置方式?二、使用步骤1.使用$Value 注解2.使用@Configur

SpringBoot后端实现小程序微信登录功能实现

《SpringBoot后端实现小程序微信登录功能实现》微信小程序登录是开发者通过微信提供的身份验证机制,获取用户唯一标识(openid)和会话密钥(session_key)的过程,这篇文章给大家介绍S... 目录SpringBoot实现微信小程序登录简介SpringBoot后端实现微信登录SpringBoo

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Java如何用乘号来重复字符串的功能

《Java如何用乘号来重复字符串的功能》:本文主要介绍Java使用乘号来重复字符串的功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java乘号来重复字符串的功能1、利用循环2、使用StringBuilder3、采用 Java 11 引入的String.rep