html 轮播带标题滚动,JavaScript实现带标题的图片轮播特效

浅浅的花香味﹌ 2022-10-06 13:49 189阅读 0赞

图片轮播，在一些购物网站上运用的不胜枚举，下面简单介绍一下图片轮播的实现。

如图

![fdf5a1e86fe8ae3725f02d80c2fdc358.png][]

![c420916c9f5fd484a4e2c17dc0c85155.png][]

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;

HTML代码：

![广告图片][Image 1]

JS代码：

// 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

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.οnlοad=show; //页面加载时运行函数show()

以上所述就是本文给大家分享的全部内容了，希望大家能够喜欢。

[fdf5a1e86fe8ae3725f02d80c2fdc358.png]: /images/20221005/71fe8c21047949d2bab457f4b056f65a.png
[c420916c9f5fd484a4e2c17dc0c85155.png]: /images/20221005/8ffc1671195e44799c8cf072e846a096.png
[Image 1]:

html 轮播带标题滚动,JavaScript实现带标题的图片轮播特效

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 js实现标题文字向上轮播

相关 Html图片轮播遍历,javaScript 简单轮播图实现

相关 html 轮播带标题滚动,JavaScript实现带标题的图片轮播特效

相关 html图片翻转轮播,JavaScript实现旋转轮播图

相关简单html实现图片轮播,JavaScript实现简易轮播图

相关 html图片轮播带滚动条,纯CSS手动滑动轮播图（隐藏滚动条）

相关 html图片轮播带滚动条,纯CSS手动滑动轮播图（隐藏滚动条）

相关 html实现自动图片轮播,图片轮播的实现（html__js）

相关 JavaScript实现图片轮播

相关 html-css-javaScript实现图片轮播