求高手修改这个JS幻灯片代码，我需要图中所示地方添加每个图片文字说明！急

发布网友发布时间：2022-04-06 12:11

我来回答

共2个回答

懂视网时间：2022-04-06 16:32

本篇文章给大家带来的内容是介绍css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在之前的文章【css如何实现幻灯片效果？幻灯片的实现方法】中介绍了实现淡入淡出幻灯片的实现方法，本篇文章就在其基础上去解释如何在幻灯片上添加文字，可以随着幻灯片切换不同文字；以及把淡入淡出效果转换成旋转木马的切换效果的方法（附代码）。

下面我们就来一步步实现效果（可以去之前的文章获取实现幻灯片效果的代码）。

5、给幻灯片添加文本文字

有很多方法可以解决这个问题，但也许最简单的方法是在链接中添加一些标题属性，并使用CSS在图像上显示它们：

html代码：

<div id="stage">
	<a href="img/1.jpg" title="图片1"><img src="img/1.jpg" width="640" height="400"></a>
	<a href="img/2.jpg" title="图片2"><img src="img/2.jpg" width="640" height="400"></a>
	<a href="img/3.jpg" title="图片3"><img src="img/3.jpg" width="640" height="400"></a>
	<a href="img/4.jpg" title="图片4"><img src="img/4.jpg" width="640" height="400"></a>
	<a href="img/5.jpg" title="图片5"><img src="img/5.jpg" width="640" height="400"></a>
	<a href="img/6.jpg" title="图片6"><img src="img/6.jpg" width="640" height="400"></a>
	<a href="img/7.jpg" title="图片7"><img src="img/7.jpg" width="640" height="400"></a>
	<a href="img/8.jpg" title="图片8"><img src="img/8.jpg" width="640" height="400"></a>
</div>

css代码：

#stage a::after {
 position: absolute;
 left: 11px;
 bottom: 11px;
 padding: 2px 0;
 width: calc(100% - 22px);
 background: rgba(0,0,0,0.5);
 text-align: center;
 content: attr(title);
 font-size: 1.1em;
 color: #fff;
 }

除了为我们的链接添加title属性之外没有其他任何变化，我们现在已经开始了基本的CTA幻灯片放映，甚至可以将其转换为对关键帧进行一些调整的轮播。

效果图：

所以，如果你必须有一个主页幻灯片来取悦那些权力，那就考虑放弃jQuery，就像上面那样。如果您有任何反馈或问题，请使用下面的按钮告诉我们。

6、转换为旋转木马切换效果

效果图（静态的，大家可以自己编译运行，查看效果）：

附上css+js代码（html代码如上）：

css代码：

#stage {
 margin: 1em auto;
 width: 640px;
 height: 400px;
 border: 10px solid #000;
 overflow: hidden;
 }
 #stage a {
 position: relative;
 display: inline-block;
 }
 #stage a::after {
 position: absolute;
 left: 11px;
 bottom: 11px;
 padding: 2px 0;
 width: calc(100% - 22px);
 background: rgba(0,0,0,0.5);
 text-align: center;
 content: attr(title);
 font-size: 1.1em;
 color: #fff;
 }

 #stage a:nth-of-type(2) {
 left: 640px;
 top: -50%;
 animation-name: slider;
 animation-delay: 4s;
 animation-duration: 1s;
 animation-timing-function: cubic-bezier(0,1.5,0.5,1);
 }
 #stage a:nth-of-type(n+3) {
 display: none;
 }

 @keyframes slider {
 from { transform: translateY(-50%) rotate(30deg); left: 360px; }
 to { transform: translateY(-50%); left: 0px; }
 }

js代码：

window.addEventListener("DOMContentLoaded", function(e) {

 var stage = document.getElementById("stage");
 var slideComplete = function(e) { stage.appendChild(arr[0]); };
 var arr = stage.getElementsByTagName("a");
 for(var i=0; i < arr.length; i++) {
 arr[i].addEventListener("animationend", slideComplete, false);
 }

 }, false);

大功告成，大家可以自己动手编译看看效果！

总结：

热心网友时间：2022-04-06 13:40

擦,真操蛋,全js输出.一点好处没有,改的时候也麻烦.懒的调输出了,你自己改吧.
<script>
var widths=646; //设置幻灯片宽度

var heights=416; //设置幻灯片高度
var counts=5; //设置幻灯片数量
//设置图片路径
img1=new Image ();img1.src='images/home1.jpg';
img2=new Image ();img2.src='images/home2.jpg';
img3=new Image ();img3.src='images/home3.jpg';
img4=new Image ();img4.src='images/home4.jpg';
img5=new Image ();img5.src='images/home5.jpg';
//设置图片的URL
url1=new Image ();url1.src='#';
url2=new Image ();url2.src='#';
url3=new Image ();url3.src='#';
url4=new Image ();url4.src='#';
url5=new Image ();url5.src='#';
var txt=new Array()
txt[0]="111111"
txt[1]="111111"
txt[2]="111111"
txt[3]="111111"
txt[4]="111111"
var nn=1;
var key=0;
function change_img()
{
if(key==0){key=1;}
else if(document.all)
{
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(ration=2);
}
eval('document.getElementById("pic").src=img'+nn+'.src');
eval('document.getElementById("url").href=url'+nn+'.src');
eval('document.getElementById("txt").innerHTML=txt['+nn+']');
for (var i=1;i<=counts;i++)
{document.getElementById("xxjdjj"+i).className='axx';}
document.getElementById("xxjdjj"+nn).className='bxx';
nn++;
if(nn>counts){nn=1;}
//设置图片切换间隔时间
tt=setTimeout('change_img()',5000);
}
function changeimg(n)
{nn=n;window.clearInterval(tt);change_img();}
document.write('<style>');
document.write('.axx{padding:1px 10px;border-left:#cccccc 1px solid;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:26px;font:24px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:26px;font:24px sans-serif;background-color:#999;}');
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:26px;font:24px sans-serif;background-color:#D34600;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:26px;font:24px sans-serif;background-color:#D34600;}');
document.write('</style>');
document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-26px;position:relative;margin:1px;height:26px;padding:0px;margin:0px;border:0px;">');
<table>
<tr>
<td id=txt><td>
<td>
for(var i=1;i<counts+1;i++)
{
document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');
}
</td>
</tr>
</table>
document.write('</div></div>');
change_img();
</script>追问为什么不滚动了呢？点12345也无法链接过去

追答最下面输入
document.write('')
document.write('')
document.write('')
document.write('')
for(var i=1;i'+i+'');
}
document.write('')
document.write('')
document.write('')

都说了输入那里自己调....