JavaScript实现带标题的图片轮播特效
作者：纸飞机时间：2026-10-29 10:02:37浏览：502
本文详细介绍如何使用JavaScript、HTML和CSS实现一个带有标题和图片切换功能的轮播组件。通过定义全局变量控制当前帧与最大帧数，利用定时器自动播放及点击事件手动切换，配合CSS样式美化序号按钮与背景，提供完整的代码实现方案，适用于电商等需要展示多张图片的场景。
图片轮播实现概述
在各类购物网站中，图片轮播功能的应用非常广泛。本文将简要介绍实现这一功能的具体方法。
效果如图所示。
对应的CSS样式代码如下：
CSS样式定义
<style type="text/css">
.body{
width:524px;
border:solid 1px #666;
margin-left:auto;
margin-right:auto;
}
.bg{
background-color:#E0E0E0;
height:20px;
border-top:solid 1px #B4B4B4;
}
.number{
font-size: 14px;
font-weight: bold;
color: #FFF;
background-color: #9E2E07;
display: block;
border: 1px solid #FFF;
width:18px;
height:18px;
text-align: center;
margin-left:10px;
cursor:pointer;
float:left;
}
.numberOver{
color:#8C2806;
font-size:14px;
width:280px;
background-color:#FFF;
text-align:center;
float:left;
display: block;
margin-left:10px;
}
.main{
width:95%;
margin-left:auto;
margin-right:auto;
}
.left_indent{
padding-left:20px;
}
.red{
color:#F00;
}
</style>
HTML结构代码如下：
HTML结构构建
<div class="body"><img src="ad-01.jpg" width="524" height="190" border="0" alt="广告图片" id="Rotator">
<div class="bg">
<div class="number" id="fig_1" onclick="show(1);">1</div>
<div class="number" id="fig_2" onclick="show(2);">2</div>
<div class="number" id="fig_3" onclick="show(3);">3</div>
<div class="number" id="fig_4" onclick="show(4);">4</div>
</div>
</div>
JavaScript逻辑代码如下：
JavaScript交互逻辑
<script type="text/javascript">
// JavaScript Document
//定义全局变量
var title=new Array();
title[0]="1.店庆第一波 限时抢购 一日三疯！";
title[1]="2.十年店庆均价场 39/99/169专场！";
title[2]="3.全场69折封顶 享当当的超值低价！";
title[3]="4.店庆钜献 海量图书69折封顶";
var NowFrame = 1; //最先显示第一张图片
var MaxFrame = 4; //一共五张图片
function show(d1) {
if(Number(d1)){
clearTimeout(theTimer); //当触动按扭时，清除计时器
NowFrame=d1; //设当前显示图片
}
for(var i=1;i<(MaxFrame+1);i++){
if(i==NowFrame){
document.getElementById("Rotator").src ="ad-0"+i+".jpg"; //显示当前图片
document.getElementById("fig_"+i).innerHTML=title[i-1]; //显示当前图片对应的标题
document.getElementById("fig_"+i).className="numberOver"; //设置当前标题的CSS样式
}
else{
document.getElementById("fig_"+i).innerHTML=i;
document.getElementById("fig_"+i).className="number";
}
}
if(NowFrame == MaxFrame){ //设置下一个显示的图片
NowFrame = 1;
}
else{
NowFrame++;
}
}
var theTimer=setInterval('show()', 3000); //设置定时器，显示下一张图片
window.onload=show; //页面加载时运行函数show()
</script>以上内容即为本文分享的完整实现方案，希望读者能够从中受益。
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28