В этой статье описывается метод JS для реализации эффекта переключения изображения Flash Slide. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-cn">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<meta http-equiv = "content-language" content = "gb2312" />>
<meta name = "Автор" content = "Rainoxu" />
<Title> JS моделирует эффект переключения изображения Flash Slide </title>
</head>
<тело>
<стиль типа = "text/css">
/ * <! [Cdata [ */
ul, li {
Заполнение: 0;
поля: 0;
Список стиля: нет;
}
#flashbox {
Ширина: 326px;
Высота: 246px;
Граница: 1PX SOLID #EEE;
позиция: относительно;
}
#flashbox img {
/*Не показывать изначально*/
дисплей: нет;
/* Используйте границы для достижения пустых пространств, потому что край и накладка иногда могут вызвать некоторые проблемы*/
Граница: 3PX SOLID #FFF;
}
#flashbox ul {
позиция: абсолютно;
Справа: 7px;
Внизу: 9px;
Шрифт: 9px Тахома;
}
#flashbox ul li {
дисплей: блок;
Плавание: осталось;
Ширина: 12px;
Высота: 12px;
высота линии: 12px;
Право маржи: 3PX;
Граница: 1PX SOLID #999;
Фон:#f0f0f0;
Текст-альбом: Центр;
курсор: указатель;
}
#flashbox ul li.hover {
Пограничный цвет: красный;
Фон:#ffe1e1;
Цвет: красный;
}
/ *]]> *//
</style>
<script type = "text/javascript">
Функция FlashBoxCtrl (O) {
this.obj = document.getElementbyId (o);
// Хотя этот личный метод был написан, он не полезен на данный момент
Функция AddListener (Ele, EventName, FunctionBody) {
if (ele.attachevent) {
ele.attachevent ("on"+eventname, functionbody);
} else if (ele.addeventListener) {
ele.addeventlistener ("on"+eventname, functionbody, false);
}еще{
вернуть ложь;
}
}
// инициализация
this.init = function () {
var objimg = this.obj.getelementsbytagname ("img");
var Taglength = objimg.length;
if (taglength> 0) {
var oul = document.createElement ("ul");
oul.setattribute ("id", o+"numtag");
for (var i = 0; i <taglength; i ++) {
var oli = oul.appendchild (document.createElement ("li"));
if (i == 0) {
oli.setattribute ("class", "Hover"); // Установите первый, чтобы выделить во время инициализации
oli.setattribute ("classname", "Hover");
}
// Установить количество метков
oli.appendchild (document.createtextnode ((i+1)));
}
this.obj.appendchild (oul);
objimg [0] .style.display = "block";
// Установить события тега
var otag = this.obj.getelementsbytagname ("li");
for (var i = 0; i <otag.length; i ++) {
otag [i] .onmouseover = function () {
for (j = 0; j <otag.length; j ++) {
otag [j] .classname = "";
objimg [j] .style.display = "none";
}
this.classname = "Hover";
objimg [this.innerhtml-1] .style.display = "block";
}
}
}
};
// Метод автоматического прокрутки еще не написан
this.imgroll = function () {};
// Метод init () автоматически загружается при генерации объекта для инициализации объекта
this.init ();
}
</script>
<div id = "flashbox">
<img src = "/images/m02.jpg"/>
<img src = "/images/m03.jpg"/>
<img src = "/images/m04.jpg"/>
<img src = "/images/m09.jpg"/>
</div>
<script type = "text/javascript">
// генерировать объект
new FlashboxCtrl ("Flashbox");
</script>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.