В этой статье описывается эффект переключения слайдов изображения, который можно назвать JS несколько раз на одной странице. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! 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">
<голова>
<Title> JS -эффект переключения изображения, который можно назвать несколько раз на одной и той же странице </title>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<!-Добавьте следующий код между <Head> и </head>->
<script language = "javascript">
// объявить пространство имен
var $ o = new Object ();
// Базовый метод
$ o.base = {
E: функция (a, f) {
for (var i = 0, j = a.length; i <j; i ++) {f.call (a [i], i);}
}
}
$ O. slide = function (id, arg) {
var arg = arg || {},
t = document.getElementbyId (id),
a = t.getelementsbytagname ("a"),
lis = [],
cl = arg.color || '#f30',
ctm = arg.time*1000 || 2000,
w = t.clientWidth,
h = t.clientHeight,
b = ['<ul style = "margin: 0; падки: 0; стиль списка: нет; дисплей: block; position: Absolute; внизу: 10px; справа: 10px;">'],
index = 0,
$ = null,
$ = null;
изменение функции (i) {
if (!! $) {cleartimeout ($);}
index =! isnan (i)? I: index+1;
if (index> = a.length) {index = 0;}
$ o.base.e (lis, function (k) {if (k == index) {c (1, this);} else {c (0, this)}});
var to = - index*h;
if (a [0] .offsettop == to) {
возвращаться;
}еще{
if (!! $) {clearInterval ($);}
$ = setInterval (function () {
var ot = a [0] .OffSetTop;
v = математика [до <ot?
if (ot == to) {clearInterval ($); $ = null; st ();}
OT += V;
a [0] .style.margintop = ot + "px";
}, 30)
};
}
Функция C (B, O) {
o.style.backgroundcolor = !! B? Cl: "#fff";
o.style.color = !! b? "#fff": cl;
}
function st () {
if (!! $) cleartimeout ($);
$ = setTimeout (function () {change ()}, ctm);
}
с (t.style) {overflow = 'hidden'; position = 'относительно';}
$ o.base.e (a, function (n) {
this.style.display = "block";
с (this.firstchild.style) {borderwidth = '0'; width = w + 'px'; height = h + 'px';}
b.push ('<li>' + (n + 1) + '</li>');
});
b.push ('</ul>');
t.innerhtml += b.join ("");
lis = t.getelementsbytagname ("li");
$ o.base.e (lis, function (n) {
if (n == index) {c (1, это)}
this.onmouseover = function () {
if (n! = index) изменение (n);
}
});
ST ();
}
</script>
</head>
<тело>
<!-Добавьте следующий код между <body> и </body>->
<div id = "aa">
<a href = "javascript: alert ('1')"> <img src = "/images/1.jpg"> </a>
<a href = "javascript: alert ('2')"> <img src = "/images/2.jpg"> </a>
<a href = "javascript: alert ('3')"> <img src = "/images/3.jpg"> </a>
<a href = "javascript: alert ('4')"> <img src = "/images/4.jpg"> </a>
<a href = "javascript: alert ('5')"> <img src = "/images/5.jpg"> </a>
<a href = "javascript: alert ('6')"> <img src = "/images/6.jpg"> </a>
<a href = "javascript: alert ('7')"> <img src = "/images/7.jpg"> </a>
<a href = "javascript: alert ('8')"> <img src = "/images/8.jpg"> </a>
<a href = "javascript: alert ('9')"> <img src = "/images/9.jpg"> </a>
</div>
<script language = "javascript">
Новый $ O.Slide ("AA");
</script>
<br>
<div id = "bb">
<a href = "###"> <img src = "/images/1.jpg"> </a>
<a href = "###"> <img src = "/images/2.jpg"> </a>
<a href = "###"> <img src = "/images/3.jpg"> </a>
<a href = "###"> <img src = "/images/4.jpg"> </a>
<a href = "###"> <img src = "/images/5.jpg"> </a>
</div>
<script language = "javascript">
Новый $ O.Slide ("bb", {color: '#000', время: 0,2});
</script>
<br>
<div id = "cc">
<a href = "###"> <img src = "/images/1.jpg"> </a>
<a href = "###"> <img src = "/images/2.jpg"> </a>
<a href = "###"> <img src = "/images/3.jpg"> </a>
<a href = "###"> <img src = "/images/4.jpg"> </a>
<a href = "###"> <img src = "/images/5.jpg"> </a>
</div>
<script language = "javascript">
Новый $ O.Slide ("cc", {color: 'green'});
</script>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.