web前端js基础------制作滚动图片

1,要求

通过定时器使其出现滚动的效果

可以通过按键控制图片滚动的方向(设置两个按钮绑定点击事件)

当鼠标悬停时图片停止,鼠标离开时图片继续向前滚动(可以设置鼠标的悬停和离开事件)

参考如下

			content.onmouseenter = function(){//设置鼠标悬停事件key = "stop";}content.onmouseleave = function(){//设置鼠标离开事件key = "run";}

图片可以持续滚动,不会出现空白(添加滚动图片)

2,参考代码(左右滚动)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#slide{width:800px;height: 100px;margin: 0 auto;margin-top: 100px;border: 1px solid black;overflow: hidden;}#content{width: 999999px;}img{width: 160px;height: 100px;float: left;margin-right: 10px;cursor: pointer;}#button{width: 100px;margin: 20px auto;}</style></head><body><div id="slide"><div id="content"><img src="../img/1.png"/><img src="../img/2.png"/><img src="../img/3.png"/><img src="../img/4.png"/><img src="../img/5.png"/><img src="../img/6.png"/><img src="../img/7.png"/><img src="../img/8.png"/><img src="../img/9.png"/></div></div><div id="button"><button type="button" id="left">向左</button><button type="button" id="right">向右</button></div><script type="text/javascript">var content = document.getElementById("content");var left = document.getElementById("left");var right = document.getElementById("right");content.style.marginLeft = 0+"px";content.innerHTML = content.innerHTML+content.innerHTML+content.innerHTML;var key = "run";var dkey = "left";left.onclick = function(){dkey = "left";}right.onclick = function(){dkey = "right";}content.onmouseenter = function(){key = "stop";}content.onmouseleave = function(){key = "run";}dd();function dd(){var num = parseFloat(content.style.marginLeft);if(key == "run"){if(dkey == "left"){num-=0.5;if(num<=-170*9){num=0;}}else{num+=0.5;if(num>=0){num=-170*9;}}}content.style.marginLeft = num+"px";setTimeout("dd()",13);}</script></body>
</html>

3,结果参考示例

4,参考代码(上下滚动)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 设置盒子 */#div{height: 800px;width: 100px;border: 1px solid black;margin: 0px auto;overflow: hidden;			}/* 设置内容即图片的容器*/#content{height: 999999px;}/* 设置图片的样式 */img{width: 100px;height: 160px;margin-top: 10px;cursor: pointer;}/* 设置按钮样式*/#button{ width: 100px;margin: 20px auto;}</style></head><body><div id="div"><div id="content"><img src="../img/2ee18-231100-163232346010b0.jpg"/><img src="../img/1.png"/><img src="../img/2.png"/><img src="../img/3.png"/><img src="../img/4.png"/><img src="../img/5.png"/><img src="../img/6.png"/><img src="../img/7.png"/><img src="../img/8.png"/><img src="../img/9.png"/></div></div><div id="button"><button type="button" id="top">向上</button><button type="button" id="buttom">向下</button></div><script>var content = document.getElementById("content");//获取内容的idvar topSlide =document.getElementById("top");//获取向上按钮的idvar downSlide =document.getElementById("buttom");//获取向下按钮的idcontent.innerHTML = content.innerHTML+content.innerHTML+content.innerHTML;//使内容乘于3倍content.style.marginTop = 0 + "px";//设置外边距初始值var key = "run";//设置初始是运行的var dkey = "top";//设置初始是向右边的topSlide.onclick = function(){dkey = "top";}downSlide.onclick = function(){dkey = "buttom";}content.onmouseenter = function(){//设置鼠标悬停事件key = "stop";}content.onmouseleave = function(){//设置鼠标离开事件key = "run";}slide();function slide(){var num = parseFloat(content.style.marginTop);if(key == "run"){if(dkey == "top"){num-=0.5;if(num<=-170*9){num=0;}}else{num+=0.5;if(num>=0){num=-170*9;}}}		content.style.marginTop = num+"px";setTimeout("slide()",13);//设置定时器使其运行}</script></body>
</html>

效果同3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/134382.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

揭开堆叠式自动编码器的强大功能

一、介绍 在不断发展的人工智能和机器学习领域&#xff0c;深度学习技术因其处理复杂和高维数据的能力而广受欢迎。在各种深度学习模型中&#xff0c;堆叠式自动编码器是一种多功能且功能强大的工具&#xff0c;可用于特征学习、降维和数据表示。本文探讨了堆叠式自动编码器在深…

【论文阅读】Generating Radiology Reports via Memory-driven Transformer (EMNLP 2020)

资料链接 论文原文&#xff1a;https://arxiv.org/pdf/2010.16056v2.pdf 代码链接&#xff08;含数据集&#xff09;&#xff1a;https://github.com/cuhksz-nlp/R2Gen/ 背景与动机 这篇文章的标题是“Generating Radiology Reports via Memory-driven Transformer”&#xf…

【JAVA】:万字长篇带你了解JAVA并发编程-死锁优化【六】

目录 【JAVA】&#xff1a;万字长篇带你了解JAVA并发编程-并发编程的优化【六】并发编程的优化避免死锁死锁产生的条件避免死锁的方式死锁例程代码使用JpsJstack查看进程死锁问题 避免资源竞争 个人主页: 【⭐️个人主页】 需要您的【&#x1f496; 点赞关注】支持 &#x1f4a…

C#,数值计算——偏微分方程,谱方法的微分矩阵的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 谱方法的微分矩阵 /// Differentiation matrix for spectral methods /// </summary> public class Weights { public Weights() { …

Spring Boot项目中通过 Jasypt 对属性文件中的账号密码进行加密

下面是在Spring Boot项目中对属性文件中的账号密码进行加密的完整步骤&#xff0c;以MySQL的用户名为root&#xff0c;密码为123321为例&#xff1a; 步骤1&#xff1a;引入Jasypt依赖 在项目的pom.xml文件中&#xff0c;添加Jasypt依赖&#xff1a; <dependency><…

Go语言开发环境安装,hello world!

1. Go开发包SDK https://golang.google.cn/dl/&#xff08;国内也可以安装&#xff09; 根据自己电脑下载对应的安装包&#xff0c;我懒下载了msi安装 然后一路点确定安装Go 2.安装GoLand https://www.jetbrains.com/go/download/#sectionwindows 下载安装包 一路确定安装完…

LoRaWAN物联网架构

与其他网关一样&#xff0c;LoRaWAN网关也需要在规定的工作频率上工作。在特定国家部署网关时&#xff0c;必须要遵循LoRa联盟的区域参数。不过&#xff0c;它是没有通用频率的&#xff0c;每个国家对使用非授权MHZ频段都有不同的法律规定。例如&#xff0c;中国的LoRaWAN频段是…

接口测试工具的实验,Postman、Swagger、knife4j(黑马头条)

一、Postman 最常用的接口测试软件&#xff0c;需要注意点&#xff1a;在进行post请求时&#xff0c;需要选择JSON形式发送 输入JSON字符串&#xff0c;比如&#xff1a; {"maxBehotTime": "2021-04-19 00:19:09","minBehotTime": "2021-…

微信小程序:怎么在一个js中修改另一个js的数据(这里通过缓存进行实现)

实例&#xff1a;现有两个页面index.js和category.js,我现在想在index.js中修改category.js的数据 初始数据 category [{name: 物流配送,list: [{id: 1,job: 外卖骑手,checked: true}, {id: 2,job: 快递员,checked: false}, {id: 3,job: 司机,checked: false}, {id: 4,job: …

Nat. Med. | 基于遗传学原发部位未知癌症的分类和治疗反应预测

今天为大家介绍的是来自Alexander Gusev团队的一篇论文。原发部位未知癌症&#xff08;Cancer of unknown primary&#xff0c;CUP&#xff09;是一种无法追溯到其原发部位的癌症&#xff0c;占所有癌症的3-5&#xff05;。CUP缺乏已建立的靶向治疗方法&#xff0c;导致普遍预后…

支持存档的书签服务LinkWarden

什么是 LinkWarden &#xff1f; Linkwarden 是一个自托管、开源协作书签管理器&#xff0c;用于收集、组织和存档网页。目标是将您在网络上找到的有用网页和文章组织到一个地方&#xff0c;并且由于有用的网页可能会消失&#xff08;参见链接失效的必然性&#xff09;&#xf…

回归模型原理总结及代码实现

前言 本文将介绍回归模型算法&#xff0c;并总结了一些常用的除线性回归模型之外的模型&#xff0c;其中包括一些单模型及集成学习器。 保序回归、多项式回归、多输出回归、多输出K近邻回归、决策树回归、多输出决策树回归、AdaBoost回归、梯度提升决策树回归、人工神经网络、…

Kibana使用Timelion根据时间序列展示数据

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

工业自动化工厂PLC远程控制网关物联网应用

远程控制网关在工厂自动化领域中起到了至关重要的作用&#xff0c;特别是在工厂PLC数据通讯方面。它充当着数据传输的桥梁&#xff0c;连接了工厂中的各类设备和系统&#xff0c;实现了远程监控和控制的功能。本文将详细介绍远程控制网关在工厂PLC数据通讯中的应用。 远程控制网…

计算机毕业设计 基于SpringBoot的私人西服定制系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

浅谈电力物联网时代物联网技术在电力系统中的应用

贾丽丽 安科瑞电气股份有限公司 上海嘉定201801 摘要&#xff1a;在电力系统建设中&#xff0c;物联网的应用不仅促进了我国电力工业的发展&#xff0c;而且对我国的物联网技术也起到了一定的促进作用。随着物联网技术应用于电力系统&#xff0c;推动了中国工业的快速发展。因…

利用python找出偏序集中极大元、极小元、最大元和最小元

1 问题 在离散数学“关系”这一章的学习过程中&#xff0c;学到偏序集中极大元、极小元、最大元和最小元的求解方法&#xff0c;于是提出能不能用python语言实现偏序集中极大元、极小元、最大元和最小元的求解&#xff1f; 2 方法 判断偏序集中的极大元、极小元、最大元和最小元…

常见React Hooks 钩子函数用法

一、useState useState()用于为函数组件引入状态&#xff08;state&#xff09;。纯函数不能有状态&#xff0c;所以把状态放在钩子里面。 import React, { useState } from react import ./Button.cssexport function UseStateWithoutFunc() {const [name, setName] useStat…

了解高防服务器的工作原理

在当今互联网时代&#xff0c;网络安全问题日益突出&#xff0c;各种网络攻击层出不穷。为了保护企业的网络安全&#xff0c;高防服务器应运而生。那么&#xff0c;你是否了解高防服务器的工作原理呢?下面就让我们一起来探索一下。 高防服务器是一种能够有效抵御各种网络攻击的…

Bun 1.0.7 版本发布,实现多个 Node.js 兼容改进

导读Bun 是一个集打包工具、转译器和包管理器于一体的 JavaScript 运行时&#xff0c;由 Jarred Sumner 发布了 1.0.7 版本。本次更新实现了对 Node.js 运行时的多项兼容性改进&#xff0c;并修复了近 60 个 bug。 根据发布说明&#xff0c;本版本对 “bun install” 命令进行…