精华内容
下载资源
问答
我要提问
  • html+css+js实现的图片轮播图下方配文字可变图片可点击
    千次阅读
    2019-12-17 16:15:50

    js代码 

    		<script>
			// 首先获取相关DOM
			var box =document.getElementById('box');
			var img =document.getElementById('img1');
			var a =document.getElementById('url');
			var left =document.getElementById('left');
			var right =document.getElementById('right');

			// 构造图片和文字数组
			var arr_img = ['images/a1.jpg','images/a2.jpg','images/a3.jpg','images/a4.jpg','images/a5.jpg' ];
			var arr_text =['我的小可爱1','我的小可爱2','我的小可爱3','我的小可爱4','我的小可爱5',];
			var arr_url =['http://www.baidu1.com','http://www.baidu2.com','http://www.baidu3.com','http://www.baidu4.com','http://www.baidu5.com',];
			// 图片轮播
			var currentIndex =1;
			function slide(){
				a.href = arr_url[currentIndex];
				img.src = arr_img[currentIndex];
				text.innerText =arr_text[currentIndex]
				currentIndex =++currentIndex%5;

			}
			// 使用setInterval完成轮播
			var pause =setInterval(slide,2000);
			// 鼠标悬停时，停止轮播
	        // 使用clearInterval来完成
	        box.addEventListener('mouseover',function(){
	        	clearInterval(pause);

	        });
	        // 鼠标离开后，继续轮播
	        box.addEventListener('mouseout',function(){
	           pause =setInterval(slide,2000);	
	        })
	        // 手动切换图片
	        left.addEventListener('click',function(){
	        	currentIndex = --currentIndex%5;
	        	if(currentIndex < 0){
	        		currentIndex +=5;
	        	}
	        	img.src = arr_img[currentIndex];
		        text.innerText = arr_text[currentIndex];
	        })
	        right.addEventListener('click',function(){
	        	currentIndex =++currentIndex%5;
	        	img.src = arr_img[currentIndex];
				text.innerText = arr_text[currentIndex];
	        })


		</script>

    css代码 

    <style>
		/*大盒子*/
		.box{
			width: 500px;
			height: 560px;
			background-color: pink;
			position: relative;
			margin-left: 20%;

		}
		/*图片大小*/
		img{
			width: 100%;
			height: 100%;
		}
		/*文本信息*/
		#text{
			width: 500px;
			height: 40px;
			font-size: 20px;
			font-family: 微软雅黑;
			text-align: center;
			line-height: 40px;
			background-color: #40E0D0;
			opacity: 0.5;
			color:#000000;
			position: absolute;
			left:0px;
			bottom: 0px;
		}
		/*左右箭头*/
		#left,#right{
			width:60px;
			height: 70px;
			font-size: 20px;
			font-family: 微软雅黑;
			text-align: center;
			line-height: 70px;
			background-color: #40E0D0;
			/* border:2px solid #a1a1a1; */
			/* border-radius:50px; */
			opacity: 0.5;
			color:#FFFFFF;
		}
		#left{
			border-top-right-radius:2em;
			border-bottom-right-radius:2em;
		}
		#right{
			border-top-left-radius:2em;
			border-bottom-left-radius:2em;
		}
		/* 指向箭头 */
		pan {
		  border: solid black;
		  border-width: 0 4px 4px 0;
		  display: inline-block;
		  padding: 7px;
		}
		
		.ri {
		    transform: rotate(-45deg);
		    -webkit-transform: rotate(-45deg);
		}
		
		.le {
		    transform: rotate(135deg);
		    -webkit-transform: rotate(135deg);
		}
		/* .up {
		    transform: rotate(-135deg);
		    -webkit-transform: rotate(-135deg);
		}
		
		.down {
		    transform: rotate(45deg);
		    -webkit-transform: rotate(45deg);
		} */
		/*定位信息*/
		#left{
			position: absolute;
			top:240px;
			left:0px;
		}
		#right{
			position: absolute;
			top: 240px;
			right:0px;
		}
		
		
	

	</style>

    html主体代码 

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
<body>
	<div class ="box" id="box">
		<a href="http://www.baidu1.com" id="url"><img src="images/a1.jpg" alt="" id="img1"></a>
		<div class="left" id="left"><pan class="le"></pan></div>
		<div class="right" id="right"><pan class="ri"></pan></div>
		<div class="text" id="text">我的小可爱1</div>	
	</div>
	
</body>
</html>

    全部代码 

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style>
		/*大盒子*/
		.box{
			width: 500px;
			height: 560px;
			background-color: pink;
			position: relative;
			margin-left: 20%;

		}
		/*图片大小*/
		img{
			width: 100%;
			height: 100%;
		}
		/*文本信息*/
		#text{
			width: 500px;
			height: 40px;
			font-size: 20px;
			font-family: 微软雅黑;
			text-align: center;
			line-height: 40px;
			background-color: #40E0D0;
			opacity: 0.5;
			color:#000000;
			position: absolute;
			left:0px;
			bottom: 0px;
		}
		/*左右箭头*/
		#left,#right{
			width:60px;
			height: 70px;
			font-size: 20px;
			font-family: 微软雅黑;
			text-align: center;
			line-height: 70px;
			background-color: #40E0D0;
			/* border:2px solid #a1a1a1; */
			/* border-radius:50px; */
			opacity: 0.5;
			color:#FFFFFF;
		}
		#left{
			border-top-right-radius:2em;
			border-bottom-right-radius:2em;
		}
		#right{
			border-top-left-radius:2em;
			border-bottom-left-radius:2em;
		}
		/* 指向箭头 */
		pan {
		  border: solid black;
		  border-width: 0 4px 4px 0;
		  display: inline-block;
		  padding: 7px;
		}
		
		.ri {
		    transform: rotate(-45deg);
		    -webkit-transform: rotate(-45deg);
		}
		
		.le {
		    transform: rotate(135deg);
		    -webkit-transform: rotate(135deg);
		}
		/* .up {
		    transform: rotate(-135deg);
		    -webkit-transform: rotate(-135deg);
		}
		
		.down {
		    transform: rotate(45deg);
		    -webkit-transform: rotate(45deg);
		} */
		/*定位信息*/
		#left{
			position: absolute;
			top:240px;
			left:0px;
		}
		#right{
			position: absolute;
			top: 240px;
			right:0px;
		}
		
		
	

	</style>
</head>
<body>
	<div class ="box" id="box">
		<a href="http://www.baidu1.com" id="url"><img src="images/a1.jpg" alt="" id="img1"></a>
		<div class="left" id="left"><pan class="le"></pan></div>
		<div class="right" id="right"><pan class="ri"></pan></div>
		<div class="text" id="text">我的小可爱1</div>	
	</div>
	
	

</body>
</html>
		<script>
			// 首先获取相关DOM
			var box =document.getElementById('box');
			var img =document.getElementById('img1');
			var a =document.getElementById('url');
			var left =document.getElementById('left');
			var right =document.getElementById('right');

			// 构造图片和文字数组
			var arr_img = ['images/a1.jpg','images/a2.jpg','images/a3.jpg','images/a4.jpg','images/a5.jpg' ];
			var arr_text =['我的小可爱1','我的小可爱2','我的小可爱3','我的小可爱4','我的小可爱5',];
			var arr_url =['http://www.baidu1.com','http://www.baidu2.com','http://www.baidu3.com','http://www.baidu4.com','http://www.baidu5.com',];
			// 图片轮播
			var currentIndex =1;
			function slide(){
				a.href = arr_url[currentIndex];
				img.src = arr_img[currentIndex];
				text.innerText =arr_text[currentIndex]
				currentIndex =++currentIndex%5;

			}
			// 使用setInterval完成轮播
			var pause =setInterval(slide,2000);
			// 鼠标悬停时，停止轮播
	        // 使用clearInterval来完成
	        box.addEventListener('mouseover',function(){
	        	clearInterval(pause);

	        });
	        // 鼠标离开后，继续轮播
	        box.addEventListener('mouseout',function(){
	           pause =setInterval(slide,2000);	
	        })
	        // 手动切换图片
	        left.addEventListener('click',function(){
	        	currentIndex = --currentIndex%5;
	        	if(currentIndex < 0){
	        		currentIndex +=5;
	        	}
	        	img.src = arr_img[currentIndex];
		        text.innerText = arr_text[currentIndex];
	        })
	        right.addEventListener('click',function(){
	        	currentIndex =++currentIndex%5;
	        	img.src = arr_img[currentIndex];
				text.innerText = arr_text[currentIndex];
	        })


		</script>

     

    更多相关内容

  • jQuery图片配文字动画切换代码

     2021-06-24 11:25:12
    jQuery图片配文字动画切换代码是一款可以点击索引按钮进行图片切换。
    收起

  • html+js+css图片轮播图下方配文字可变图片可点击.rar

     2019-12-17 16:10:08
    html+js+css图片轮播图下方配文字可变图片可点击
    收起

  • jQuery图片配文字动画切换特效代码

     2021-03-20 00:49:07
    jQuery图片配文字动画切换代码是一款可以点击索引按钮进行图片切换。
    收起

  • css 标题一行图片 两行文字的排列方法以及相关问题处理

     2020-09-25 11:29:54
    平时看模板时，比较喜欢标题带图片的效果，图片漂浮在左边，右边可以显示两行或多行文字。这样标题图片可以放大些，引人注意，而标题内容分为多行可以表示更多的信息。
    收起

  • jQuery图片配文字动画切换代码.zip

     2019-07-04 21:59:58
    jQuery图片配文字动画切换代码是一款可以点击索引按钮进行图片切换。
    收起

  • 图片下面加文字 图片周边留白加文字，照片加边框并在照片下面加文字

     千次阅读 2020-12-24 08:33:58
    所谓的图片留白加文字就是在照片的顶部、底部或其它地方空出一块地方，用来添加一些图片文字说明或自己喜欢的文字。这种效果的图片大家肯定有见过，最常见的就是微博了，这种效果的图片会显得比较的精致和美观。其实...

    所谓的图片留白加文字就是在照片的顶部、底部或其它地方空出一块地方，用来添加一些图片文字说明或自己喜欢的文字。这种效果的图片大家肯定有见过，最常见的就是微博了，这种效果的图片会显得比较的精致和美观。其实做出这种效果并不难，只需要扩展图片的画布大小，然后输入相关的文字就行了。

    效果展示

    开始操作前先准备好相应的图片素材，然后按照上面的地址下载安装相应的软件，安装后双击运行软件就行了。选择“文件”菜单下面的“打开”，在弹出的打开对话框中选择并打开所用到的图片素材。

    图片素材打开后选择“图像”菜单下面的“画布大小”，弹出画布大小对话框。勾选“相对”，接着设置画布宽高的扩展数值，如果想图片的四周都有留白区域，那只需要直接输入宽高数值即可，如果只想图片底部或顶部有留白区域，则需要点击相应的定位箭头后在再输入数值。还可以设置留白区域的颜色，设置好后点击“确定”。

    图片留白区域已经出来了，现在来输入文字内容。选择工具栏上的“钢笔工具”，在图片留白区域单击，然后输入相关的文字内容，接着在界面上方设置文字的字体、文字大小以及文字颜色。用工具栏的第一个移动工具可以更改文字的位置。

    现在图片效果已经差不多出来了，我们还可以给图片添加一个边框，使图片看上去不那么单调。先选择背景图层，再选择工具栏上的“矩形选框工具”，然后按住鼠标左键在图片上面拖动，拖出一个矩形的选区，这个选区就是要添加边框的位置。要是想重新选择选区，按快捷键“Ctrl+D”，然后重新选择即可。

    选择“编辑”菜单下面的“描边”，弹出描边对话框，设置描边的宽度、描边颜色以及描边的位置等，设置好后点击“确定”返回主界面。图片描边还有一种方式，先按ctrl+A全选图像，再选择编辑菜单下的描边，然后设置描边的相关参数就行了。这两种描边效果有点不一样，都可以尝试下。

    最后我们就可以对图片进行保存了，选择“文件”菜单下面的“存储为”，弹出存储为对话框，在当前对话框设置图片保存的位置、名称以及保存类型，最后点击“保存”。

    给图片添加文字的时候可以自行选择添加横排文字还是添加竖排文字，如果留白区域是在图片左右两侧，那建议大家添加竖排文字，右击工具栏上面的钢笔工具可以选择文字类型。图片留白区域可以通过定位箭头来设置，如果我要在图片底部留白，就要先点击向上的箭头，然后输入高度值，左右留白则输入宽度值。

    以上，就是今天关于怎样给图片留白并添加文字的相关操作。在设置图片留白位置的时候大家可以多尝试几次，其实并不复杂，不同的设置会有不一样的效果。大家在操作过程中有什么问题可以联系我们的客服qq41442901哦。

    收起
    展开全文

  • css技巧—图片配文字

     千次阅读 2017-08-15 09:05:39
    使用css实现头像和名字，图片和简介的布局

    一.头像+名称+介绍
    这里写图片描述

    这种一般在话题的开头或者评论的的开头比较常见

    实现方式：

    1，弹性盒布局（flex）,采用这种布局要考兼容性的问题：

    css:

    .header{
                display: flex;
                display: -webkit-flex;
                align-items:center;
            }
            .header_AuthorInfo .AuthorInfo{
                display: inline-block;
                padding: 5px;
            }

    html：

     <div class="header">
                <div class="header_img">
                    <a href="#">
                        <img src="image/1.jpg" alt="" width="30" height="30"/>
                    </a>
                </div>
                <div class="header_AuthorInfo">
                    <div class="AuthorInfo AuthorInfo-name">
                        <span>王洋洋</span>
                    </div>
                    <div class="AuthorInfo AuthorInfo-detail">
                        <em>前端攻城狮</em>
                    </div>
                </div>
   </div>

    2，采用浮动的方式，这种方式兼容性是最好的，写起来也简单。
    css:

      .header>.header_img{
                float: left;
            }
            .header_AuthorInfo .AuthorInfo{
                display: inline-block;
                padding: 5px;
            }

    二，图片+简介

    这里写图片描述

    这种布局方式一般出现在话题或者新闻标题处

    实现方式：
    css:

              .news{
                border:1px solid blanchedalmond
            }
            .news>.news_header{
                width:200px;
                height: 100px;
                float: left;
                padding-right:10px;
            }
            .news>.news_intro{
                height: 100px;

            }
            .news>.news_intro>p{
                padding: 0px;
            }
            .readMore{
                display: inline-block;
                color: #6495ED;
                text-decoration: none;
            }

    html:

               <div class="news">
                <div class="news_header">
                    <img src="image/2.jpg" alt="" height="100px" width="200px"/>
                </div>
                <div class="news_intro">
                        <span id="news_intro">

                        </span>

                </div>
            </div>

    这种实现方式一般都伴随着简介文字缩略，如果文字太长，文字区域的高度超过图片的高度，会出现文字包围图片的想象，这是往往会限制文字的长度，我在这里使用脚本实现的控制文字长度，个人感觉这种方式比较靠谱，可以丰富操作。
    js:

        function addIntro(){
        var str = "打开后，发现IDEA并没有自动识别Maven项目，这时候，需要手动在IDEA右侧的Maven Projects栏（如果没显示Maven Projects栏，则依次A并没有自动识别Maven项目，这时候，需要手动在IDEA右侧的Maven Projects栏（如果没显示Maven Projects栏，则依次A并没有自动识别Maven项目，这时候，需要手动在IDEA右侧的Maven Projects栏（如果没显示Maven Projects栏，则依次A并没有自动识别Maven项目，这时候，需要手动在IDEA右侧的Maven Projects栏（如果没显示Maven Projects栏，则依次A并没有自动识别Maven项目，这时候，需要手动在IDEA右侧的Maven Projects栏（如果没显示Maven Projects栏，则依次在IDEA工具栏View=》Tool Windows=》Maven Projects中打开）中添加项目的pom.xml文件，这样IDEA就能识别了";
        if(str.length>200){
                str = str.slice(0,200)+"..."+"<a href='#' class='readMore'> 阅读更多<a>";
        }
        var obj = document.getElementById("news_intro");
        obj.innerHTML=str;
    }

    今天暂时总结这两种，后面遇见比较新鲜的布局方式我再更新。

    收起
    展开全文
    css

  • 用图片来解释文字的精美全图型公司文化ppt模板.rar

     2019-09-09 05:14:27
    配图应景的高清大图，用图片来进一步解释说明文字释义的大图排版企业文化ppt模板。
    收起

  • 怎么用css在图片右下方添加文字

     千次阅读 2021-06-09 07:57:59
    有时候在一些广告图片的下面显示“广告”字眼，或者在gif动图也有显示，那么这个通过css怎么实现呢我们来看html代码广告在看em的css是怎么定义的，这么需要用到定义的属性a {display: block;position: relative;}父...

    有时候在一些广告图片的下面显示“广告”字眼，或者在gif动图也有显示，那么这个通过css怎么实现呢

    0f9f638e08d068772a7a3ef700cb5288.png

    我们来看html代码

    #广告

    在看em的css是怎么定义的，这么需要用到定义的属性

    a {

    display: block;

    position: relative;

    }

    父元素的 position: relative;然后我们在来设置em属性

    a em {

    position: absolute;

    right: 0;

    bottom: 0px;

    background: #fff;

    color: #666;

    padding: 0px 5px;

    border-radius: 3px 0 0 0;

    opacity: 0.3;

    font-size: 12px;

    font-style: normal;

    }

    然后子元素定位为 position: absolute;然后加上top ,left,bottom等属性定位左上，左下  ，右上，右下

    这样就达到想要的效果了

    来段完整的代码

    .demo a {

    display: block;

    position: relative;

    }

    .demo a em {

    position: absolute;

    left: 0;

    bottom: 0px;

    background: #fff;

    color: #666;

    padding: 0px 5px;

    border-radius: 3px 0 0 0;

    opacity: 0.3;

    font-size: 12px;

    font-style: normal;

    }

    bfe5acdfea040b2da1196220642d58d7.png广告

    收起
    展开全文

  • 如何给图片添加文字？图片加字功能怎么使用？

     千次阅读 2021-05-25 16:58:20
    在工作中，有时会遇到需要在电脑上给图片添加上文字，上传到网页上使用的情况。那么，在遇到这种情况的时候，应该如何使用电脑给图片添加文字呢？接下来，小编就为大家推荐一款简单实用的在线PS...
    收起

  • 网页制作时如何给图片添加文字？

     千次阅读 2021-06-08 19:18:12
    大家都不知道如何创建网站的图片排版，往往忽略在图片文字结合的情况下如何进行排版。换而言之，很多人讨论图文分开时候如何排版，却很少人注意到在图片上添加文字时应该怎么排版。接下来，小编要从几个方面谈一谈...
    收起

  • 机器学习笔记十五之图片文字识别

     千次阅读 2020-07-07 19:52:53
    图像文字识别应用所作的事是，从一张给定的图片中识别文字。这比从一份扫描文档中识别文字要复杂的多。 为了完成这样的工作，需要采取如下步骤： 1.文字侦测（ Text detection） ——将图片上的文字与其他环境对象...
    收起
    机器学习 滑动窗口 获取数据方法

  • 输入文字就能生成图片的绿色小软件

     2010-05-24 12:02:31
    输入文字就能生成图片的绿色小软件，无需安装，无病毒，无插件，放心使用。
    收起

  • 用css3实现鼠标移入图片后显示其他文字/图片的效果

     千次阅读 2021-06-13 06:35:59
    导读：当网页中需要实现鼠标移到某张图片，会有其他文字/图片替换当前图片的效果时，很多人会使用jQuery的效果，其实用css3就可以实现，而且很简单，下面列一下代码：主要用到的是position定位和transform: ...
    收起

  • bootstrap入门【媒体图片配文字】

     千次阅读 2015-03-01 12:04:30
    以上展示了图片的居上居中和居下，还可以在最右侧，没有展示 代码很简单不多说。 body{ margin: 10px 0; }
    收起

  • div中图片下方的说明文字如何能添加的上去

     千次阅读 2019-08-22 09:35:36
    请问div中图片下方的说明文字如何能添加的上去呀？我查了好久都没有搞出来，请大神指教，谢谢。代码及现在效果图如下： 交叉口建模 ...
    收起
    div

  • recyclerView + editTextView 编辑图片和文字标题 问题

     千次阅读 2022-04-21 11:08:03
    要的效果是一个item包括图片和标题，添加图片后添加标题到list，当删除一个item时，所有的图片标题都变成一样的，都是postion为0的文本。 猜测是刷新adapter的时候，editTextView 的 文本监听又被调用了，但是不...
    收起
    android

  • 怎么在文章中把图片放在文字的左边、右边、中 – 手机爱问

     千次阅读 2021-06-12 05:28:40
    2007-09-22发表的文章不显示文字,只显示标题和图片,只在左边显示文章的标题 ,而不在右边显示 ,这是怎么回事那 ,希望你们尽快回答我谢谢!!!!!!!!!11、一般文章开始发表时不需要审核的，正常情况发表马上刷新就可以在...
    收起

  • 微信小程序图片下边加文字组合

     万次阅读 2020-04-24 09:11:45
    图片下边加文字组合 简介 我们在开发程序的时候，很大情况会用到图片下边加文字的组合，因为好看又实用，所以在此记录一下给大家。 效果图 代码 wxml <view class="view_saoyisao"> <image class="image_...
    收起

  • Android把文字写到图片上生成图片+文字的新图片

     万次阅读 热门讨论 2017-04-21 10:05:41
    我们项目最近需要微信分享员工二维码功能，二维码图片直接使用zxing就可以生成，但是生成之后只有一个图片，而我们需求的要求是这样的：    没错就是二维码下边有一行提示文字，你可能会想直接imageview下边...
    收起
    android

  • 图片和文字对齐的方法

     万次阅读 2019-06-17 16:23:47
    文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。 方法一、 设置各对象的vertical-align属性，属性说明： baseline－将支持valign特性...
    收起

  • Flutter按钮添加背景图片及文字

     千次阅读 2019-11-19 18:42:26
    Flutter按钮添加背景图片及文字的一种方法，记录下，上代码 Widget picAndTextButton(String imgpath,String text) { return Container( width: 200, height: 60, decoration: BoxDecoration( color: Colors....
    收起
    flutter

  • Latex在图片与\caption中间加入文字

     千次阅读 2021-10-05 19:51:34
    Latex在图片与\caption中间加入文字,效果如下： 弄了一天，终于弄出来了。由于是新手，并没有教程教如何做，我以为插入图片后只能写\caption{。。。}。为了达到这个目的想了很多别的办法。我上面给的图片是一整张图...
    收起
    latex

  • 技术小白之微信小程序的图片加文字链接

     万次阅读 多人点赞 2018-09-26 19:38:09
    在多彩的图片呈现下的程序必不可缺的便是文字的搭配，图片勾起兴趣，文字辅助表达，多数情况下我们上传的图片都需要在它周围添上合适的标题，以便美观和表述清晰。下面是简单的图片文字链接的截图： 说到图片和...
    收起
    微信小程序

  • css图片下边怎么加字

     千次阅读 2021-06-11 18:15:08
    css图片下边怎么加字比较简单的做法就是，将他们放置在一个盒子内，让文字跟图片居中，只需要利用css样式的text-align属性即可，并且各个浏览器都会正常显示，代码如下： 这里是居中的文字.box{width:300px;...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,407
精华内容 17,762
热门标签
关键字：

怎么自己做图片配文字