JS效果日记（五）——封装函数之图片切换

最新推荐文章于 2021-03-25 16:27:42 发布
最新推荐文章于 2021-03-25 16:27:42 发布
阅读量127 收藏
点赞数
分类专栏： 日记 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45842320/article/details/110671849
版权

JS效果日记（五）

——封装函数之图片切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#box {
				width: 400px;
				height: 400px;
				border: 1px solid #666666;
				background: url(img/1112.jpg);
			}

			#box ul li img {
				width: 50px;
				height: 50px;
			}

			#box ul li {
				display: inline-block;
				margin-right: 20px;
				margin-top: 350px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li id="item1">
					<img src="img/1112.jpg">
				</li>
				<li id="item2">
					<img src="img/1113.jpg">
				</li>
				<li id="item3">
					<img src="img/1114.jpg">
				</li>
				<li id="item4">
					<img src="img/1115.jpg">
				</li>
				<li id="item5">
					<img src="img/1116.jpg">
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			function $(id) {
				return typeof id === 'string' ? document.getElementById(id) : null;	
			}
			function changebgcImg(liId, imgSrc) {
				$(liId).onmouseover = function() {
					$('box').style.background = imgSrc;
				}
			}
			changebgcImg('item1', 'url(img/1112.jpg)');
			changebgcImg('item2', 'url(img/1113.jpg)');
			changebgcImg('item3', 'url(img/1114.jpg)');
			changebgcImg('item4', 'url(img/1115.jpg)');
			changebgcImg('item5', 'url(img/1116.jpg)');
		</script>
	</body>
</html>

新手小白
还请大佬多多指教

Alex__Jie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js切片效果图片切换幻灯片
04-07
JavaScript切片效果图片切换幻灯片是一种常见的网页动态展示技术，它通过JavaScript编程语言实现，无需依赖外部库如jQuery，从而提高页面加载速度并降低资源消耗。这种幻灯片的效果通常包括平滑的图片切换、索引按钮...
解决js切换图片闪屏问题
恒二哥的博客
11-15 3392
主要原因：图片没有加载完全，然后调用了图片的动态效果，造成有闪屏的现象出现。 解决方法：先创建一个Image对象，然后优先加载图片，等加载完成，然后调用onload函数加载图片动态效果； 仅展示部分关键代码： var $picture = $("<div id='picture0' style='display: block;background-image: url(static/image/test0.png)' //设置等待函数(可以不用等待函数)，图片0展示0.8s后展示图片1的效果 s
js基础图片切换2封装函数
qq_43607916的博客
09-27 126
图片切换之封装函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05 图片切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ border: 1px solid #ccc; width: 430px;
js切换图片会闪动_javascript 如何实现一个闪烁图片的效果呢？
weixin_36060539的博客
12-24 1622
摘要：下文讲述javascript中使用js脚本实现闪烁图片的特效的方法分享，如下所示；闪烁图片，是我们在网页上经常看见的特效，在网页上加上闪烁的效果，可以使网页更加绚丽多彩，更加的吸引眼球，那么js如何实现这一需求呢？下文将一一道来，如下所示:实现思路:使用setTimeOut定时函数改变html元素的可见性，可达到图片时隐时现的效果，如下例所示:maomao365.com图片时隐时现-闪烁效果...
js切换图片会闪动_js图片闪动特效可以控制间隔时间如几分钟闪动一下
weixin_36410141的博客
01-14 354
js图片闪动特效可以控制间隔时间如几分钟闪动一下图片一出来，过5秒钟，开始闪动，然后停止。var inter={};var i=0;$(document).ready(function(){$("a").each(function(index,item){$(this).bind().click(function(){i=index;if(inter!=null || inter.length&g...
网页模板——javascript(DOM)图片切换效果.zip
11-22
在这个“网页模板——javascript(DOM)图片切换效果”项目中，我们可以推测主要包含以下几个关键知识点： 1. **DOM操作**：JavaScript通过DOM API可以获取、修改、添加或删除HTML元素。在图片切换效果中，可能涉及到...
JS实现运动缓冲效果的封装函数示例
11-28
本文将深入探讨如何通过封装函数实现一个具有缓冲效果的运动功能，这可以帮助开发者更高效地管理和重用代码。 首先，我们要理解"缓冲效果"（Buffer Move）的概念。缓冲效果是指在物体运动过程中，速度不是恒定的，...
javascript实现的多个层切换效果通用函数实例
10-23
主要介绍了javascript实现的多个层切换效果通用函数,涉及javascript针对页面元素样式的遍历与操作技巧,需要的朋友可以参考下
js最简单的几个特效_作为前端入门，有没有必要学习高难度css和js特效？
weixin_39665507的博客
12-03 196
熟悉web前端的人都知道，CSS和JS是前端中两个非常重要的知识点，对于刚刚学习web前端的新手小白来说，有没有必要花费大量的精力去学习CSS和JS呢？首先这个问题就很矛盾，问题中有两个词：“入门”，“高难度”。我们先来说说入门，指的是知识或业务的初始门路。我们都知道现在前端市场要求还是比较高的(要求会各种库和框架、对底层原理的理解等等)。但是所有的框架和库都是来自最基础的HTML、CSS、JS，...
JavaScript实现图片轮播插件封装
weixin_30699831的博客
07-09 92
本文为大家分享了js图片轮播插件的具体代码，供大家参考，具体内容如下 我封装的这个轮播插件只需要获取到图片和按钮就可以啦。 css 样式 .body{ width: 700px; margin: 100px auto; position: relative; height: 300px; overflow: hidden;...
解决js控制元素背景图片切换时的闪屏问题
总柴的博客
12-28 2811
解决js控制元素背景图片切换时的闪屏问题 看一个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
matlab里function函数的用法,function函数 function函数的具体用法
热门推荐
weixin_31119637的博客
03-25 3万+
我们在用Excel的过程当中经常会看到各种各样的函数，其中就包括funection函数，然而对于funectioe函数步了解的朋友一定不知道这一个函数是如何使用的，所以今天小编就来讲解这一个函数的具体使用方式是怎么样的。function函数——function()函数的具体用法function()函数的具体用法函数实际上是一个统一的代码块，你可以随时调用它。创建PHP函数的方法：所有函数的开头必须...
replaceAll , 获取字符串中的图片;封装replaceAll全部替换
猴子年华的专栏
11-17 383
获取字符串中的图片function getcontentimg(str) { var r, re, img_str = ''; re = /&lt;[img|href][^&gt;]*src\s*=\s*('|)?([^'&gt;]*)\1([^&gt;])*&gt;/ig; while ((r = re.exec(str)) != null) { img_...
h5游戏之js图形封装使用02
J辉的博客
01-13 571
希望最终形成这么个效果，index.html和类库js都不用该了，主要代码都在startGame.js里面了。/*如果平稳的动态的显示动画呢？ 说到底本质就是 隔多长时间显示静态图片再消除原来的图片， 也就是说隔多少时间刷新（循环）函数。 一般1秒60帧（次），动画看上去已经很流畅了。那1帧多少时间呢，就是1秒/60，也就1000(毫秒)/60； 所以这个函数一定都看到过setInterval(fu
JS 获取图片、文件数据并封装在json中
藏经阁
07-12 1388
var objFile = document.getElementById("img_data"); var formData = new FormData(objFile); $.ajax({ url: 'http://localhost:8080/big/gogo?type=save_img', type: "post", data: formData, cache: false, co.
js图片切换（点击左右按钮，小圆点切换图片，自动轮播）
可爱又迷人的反派少女
09-04 7378
<div> <button>&lt;</button> <button class="right">&gt;</button> <h2 id="cont">1/4</h2> <img src="./img/1.jpg" alt="" id="pic"> <ul> <li cl.
js切换图片会闪动_js 图片闪动，间隔几分钟闪动一下
weixin_29518761的博客
12-24 229
图片一出来，过5秒钟，开始闪动，然后停止。var inter={};var i=0;$(document).ready(function(){$("a").each(function(index,item){$(this).bind().click(function(){i=index;if(inter!=null || inter.length>0){window.clearInterva...
在matlab中function,Matlab中function函数使用操作方法
weixin_35587674的博客
03-16 5107
亲们或许不知道Matlab中function函数如何使用，那么今天小编就讲解Matlab中function函数使用操作方法哦，希望能够帮助到大家呢。Matlab中function函数使用操作方法打开Matlab，点击新建->函数，默认创建一个名为Untitled2函数，其中output_args是代表函数返回的结果，input_args代表函数输入的参数，输入“function [m] = ...
用js封装函数写一个Tab切换
最新发布
08-13
### 回答1： 很高兴为您解答。这个需要一些JavaScript知识，但是我们可以简单地使用以下代码来实现：<script>function toggleTab(tabName){ var tabs = document.querySelectorAll('.tab'); tabs.forEach(function(tab){ tab.classList.remove('active'); if (tab.dataset.tab === tabName){ tab.classList.add('active'); } }); }</script> ### 回答2： Tab切换是一种常见的网页交互效果，可以通过JavaScript封装一个Tab切换函数。以下是一个简单的实现： ```javascript function tabSwitch(tabId) { // 获取Tab切换容器 var container = document.getElementById(tabId); // 获取所有Tab标签和内容 var tabs = container.querySelectorAll('.tab'); var contents = container.querySelectorAll('.content'); // 遍历所有Tab标签 tabs.forEach(function(tab, index) { // 给Tab标签绑定点击事件 tab.addEventListener('click', function() { // 隐藏所有内容 contents.forEach(function(content) { content.style.display = 'none'; }); // 显示当前点击的标签对应的内容 contents[index].style.display = 'block'; // 切换选中的标签样式 tabs.forEach(function(t) { t.classList.remove('active'); }); tab.classList.add('active'); }); }); } ``` 使用该函数，只需要在HTML文档中添加相应的结构，并调用`tabSwitch`函数，例如： ```html <div id="tab-container"> <div class="tab active">Tab 1</div> <div class="tab">Tab 2</div> <div class="tab">Tab 3</div> <div class="content" style="display: block;">Content 1</div> <div class="content">Content 2</div> <div class="content">Content 3</div> </div> <script type="text/javascript"> tabSwitch('tab-container'); </script> ``` 这段代码会实现一个具有三个Tab标签和对应内容的切换效果。初始状态下，默认显示第一个Tab标签的内容。当点击其他Tab标签时，会切换显示相应的内容，并改变当前选中Tab标签的样式。 ### 回答3： 切换选项卡（Tab）是网页开发常用的功能之一，我们可以使用JavaScript封装一个Tab切换的函数。下面是一个简单的示例： HTML结构部分： ```html <div id="tabs"> <div class="tab" onclick="changeTab(0)">选项卡1</div> <div class="tab" onclick="changeTab(1)">选项卡2</div> <div class="tab" onclick="changeTab(2)">选项卡3</div> </div> <div id="contents"> <div class="content">内容1</div> <div class="content">内容2</div> <div class="content">内容3</div> </div> ``` CSS样式部分： ```css .tab { cursor: pointer; } .content { display: none; } ``` JavaScript部分： ```javascript function changeTab(index) { var tabs = document.getElementsByClassName("tab"); var contents = document.getElementsByClassName("content"); // 先隐藏所有内容 for (var i = 0; i < contents.length; i++) { contents[i].style.display = "none"; } // 显示选中的内容 contents[index].style.display = "block"; // 可以根据需要添加一些样式修改，比如高亮当前选中的选项卡 for (var i = 0; i < tabs.length; i++) { tabs[i].classList.remove("active"); } tabs[index].classList.add("active"); } ``` 以上代码使用了事件绑定，当点击选项卡时，会调用changeTab()函数，根据传入的索引值来控制显示和隐藏选项卡的内容。我们通过修改CSS的display属性来实现切换效果。 这个函数可以根据需要进行修改和扩展，比如可以自定义样式、添加动画效果等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值