Ротация картинок и возможность перехода по клику
Добрый вечер.
нужно сделать непрерывную ротацию 4 картинок так же сделать возможным переход к любой из них при нажатии соответствующей кнопки. нашёл такой вот код: <script type="text/javascript"> var total_pics_num = 4; // колличество изображений var interval = 8000; // задержка между изображениями var time_out = 1; // задержка смены изображений var i = 0; var timeout; var opacity = 100; function fade_to_next() { opacity= opacity - 1; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) k = 1; var image_next = 'image_' + k; document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.opacity = (100-opacity)/100; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; timeout = setTimeout("fade_to_next()",time_out); if (opacity==1) { opacity = 100; clearTimeout(timeout); } } setInterval ( function() { i++; if (i > total_pics_num) i=1; fade_to_next(); }, interval ); </script> <body> <img src='images/1.jpg' id="image_1" style="position: absolute;" /> <img src='images/2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> <img src='images/3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> <img src='images/4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> так же у меня есть кнопки: <img src="images/but_1.png" style="position: absolute;" /> <img src="images/but_2.png" style="position: absolute;" /> <img src="images/but_3.png" style="position: absolute;" /> <img src="images/but_4.png" style="position: absolute;" /> </body> помогите мне сделать переход к сооьветствующей картинке по клику на кнопке. З.Ы. не пинайте сильно, я совсем новичок. |
Часовой пояс GMT +3, время: 00:42. |