В этой статье примеры показывают, как JS может достичь хорошего эффекта переключения изображений в Baidu Alliance. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <html>
<Title> JS реализует хороший эффект переключения изображений в Baidu Alliance </title>
<тело>
<Скрипт>
var links = new Array ();
Ссылки [1] = "http://www.baidu.com/";
Ссылки [2] = "//www.vevb.com/";
Ссылки [3] = "http://www.sohu.com/";
Ссылки [4] = "http://sc.vevb.com/";
var imgs = new Array ();
for (var n = 1; n <= 5; n ++) imgs [n] = new image ();
imgs [1] .src = "Images/m01.jpg";
imgs [2] .src = "Images/m02.jpg";
imgs [3] .src = "Images/m03.jpg";
Imgs [4] .src = "Images/m04.jpg";
var ticts = new Array ();
сиськи [1] = "Baidu Search";
сиськи [2] = "wulin.com";
сиськи [3] = "Домашняя страница Sohu";
сиськи [4] = "Материал Дом";
var imgwidth = 550; // ширина изображения
var imgheight = 134; // ширина изображения
var str = "<style type = 'text/css'>";
str += "#imgnv {display: none; position: Absolute; внизу: -1px; справа: 0; высота: 16px;}#imgnv div {float: слева;
str += "#Imgnv div.on,#imgnv div.off {margin-bottom: 1px; ширина: 30px; высота: 15px; линейная высота: 18px!
str += "#Imgnv div.on {founale:#ce0609; color: #fff; font-weight: bold}";
str += "#Imgnv div.off {founale:#323232; color: #fff; Text-Decoration: none}";
str += "#titnv {margin-top: 3px; color:#000; text-align: center; display: none;}";
str += "</style>";
str += "<div style = 'position: относительно'>";
str + = "<div> <a id = 'dlink' href = '" + links [1] + "' target = '_ blank'> <img id = 'dimg' src = '" + imgs [1] .src + "' border = '0' width = '" + imgwidth + "ehise ='" + imgheight + "'style =' ' + alpha). onmouseover = 'pause (true)' onmouseout = 'pause (false)'> </a> </div> ";
// Изменить точку 1: зацикливание внутреннего содержания DIV, чтобы увеличить количество
str += "<div id = 'imgnv'> <div id = 'it1' class = 'on' onmouseover = 'imgswitch (1, true)' onmouseout = 'pause (false)'> 1 </div> <div id = 'it2' class = 'off' onmouseover = 'imgswitch (2, true)' onmouseout = 'pause (false) class = 'on' onmouseover = 'imgswitch (3, true)' onmouseout = 'pause (false)'> 3 </div> <div id = 'it4' class = 'off' onmouseover = 'imgswitch (4, true)' onmouseout = 'pause (false)'> 4 </div> </div> ";
str + = "<div id = 'titnv'> <b>" + tits [1] + "</b> </div>";
str += "</div>";
document.write (str);
var oi = document.getElementbyId ("dimg");
var pause = false;
var curid = 1;
var a astic = 1;
var sw = 1;
var opacity = 100;
var speed = 15;
var Dolement = (document.all)? 400: 700;
функция setAlpha () {
if (document.all) {
if (oi.filters && oi.filters.alpha) oi.filters.alpha.opacity = непрозрачность;
}еще{
oi.style.mozopacity = ((непрозрачность> = 100)? 99: непрозрачность) / 100;
}
}
функция imgswitch (id, p) {
if (p) {
пауза = true;
непрозрачность = 100;
Setalpha ();
}
oi.src = imgs [id] .src;
document.getElementbyId ("dlink"). href = links [id];
document.getElementById ("it" + astid) .classname = "off";
document.getElementbyId ("it" + id) .classname = "on";
document.getElementbyId ("titnv"). innerhtml = "<b>" + tits [id] + "</b>";
curid = astid = id;
}
функция scrollimg () {
if (pause && opacity> = 100) return;
if (sw == 0) {
непрозрачность += 2;
if (непрозрачность> задержка) {непрозрачность = 100; SW = 1; }
}
if (sw == 1) {
непрозрачность -= 3;
if (непрозрачность <10) {непрозрачность = 10; SW = 3; }
}
Setalpha ();
if (sw! = 3) return;
SW = 0;
Curid ++;
// Изменить точку 2: 4 ЗДЕСЬ.
if (curid> 4) curid = 1;
Imgswitch (Curid, false);
}
Функция пауза (s) {
пауза = s;
}
функция startscroll () {
setInterval (scollimg, speed);
}
function checkload () {
if (imgs [1] .complete == true && imgs [2] .complete == true) {
ClearInterval (CheckID);
SetTimeout (StartsCroll, 2000);
}
}
var checkId = setInterval (ceckload, 10);
</script>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.