LINUX.ORG.RU
решено Форум — Web-development  

[javascript] Не отрабатывает как надо.

 


0

0

Взял готовый срипт по вертикальной смене изображений здесь, но почему-то он меняет только первый две картинки, мне необходима смена из 11 изображений, в js я полный валенок, подскажите как поправить.

мой массив: 

var slideimages=new Array()
slideimages[0]='<img src="image00001.jpg">'
slideimages[1]='<img src="image00002.jpg" border="1">'
slideimages[2]='<img src="image00003.jpg" border="1">'
slideimages[3]='<img src="image00004.jpg" border="1">'
slideimages[4]='<img src="image00005.jpg" border="1">'
slideimages[5]='<img src="image00006.jpg" border="1">'
slideimages[6]='<img src="image00007.jpg" border="1">'
slideimages[7]='<img src="image00008.jpg" border="1">'
slideimages[8]='<img src="image00009.jpg" border="1">'
slideimages[9]='<img src="image000010.jpg" border="1">'
slideimages[10]='<img src="image000011.jpg" border="1">'
slideimages[11]='<img src="image000012.jpg" border="1">'

★★★★★

Make me unsee it…

Deleted
()

> Посмотрите на работу этого великолепного скрипта

Это тихий ужас, а не великолепие!

anonymous
()

Тебе везёт. Держи скрипт: 

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Фотогалерея</title>
<script type="text/javascript">
<!--
var Scroller = function(m_outer_div_id, images)
{
//settings:
	var m_fps = 24;
	var m_scrolling_time = 500;
	var m_slideshow_interval = 2000;
//prvate:
	var m_outer_div = document.getElementById(m_outer_div_id);
	var m_height = m_outer_div.style.pixelHeight;
	var m_div;
	var m_images = images;
	var m_current = 0;
	var m_scrolling_interval_handle;
	var m_slideshow_interval_handle;
	var m_frame_count = 0;
	var m_main_img;
	var m_offset = 0; //если использовать pixelTop напрямую, то прокрутка дёргается, т.к. pixelTop - целое
	function make_img(src)
	{
		var new_img = document.createElement('img');
		new_img.setAttribute('src',src);
		return new_img;
	}
	function scroll_step()
	{
		var direction = m_frame_count>0?1:-1;
		m_frame_count-=direction;
		if (m_frame_count==0)
		{
			clearInterval(m_scrolling_interval_handle);
			m_scrolling_interval_handle = 0;
			var children = m_div.childNodes;
			for (var i=0;i<children.length;++i)
				if (children[i]!=m_main_img)
					m_div.removeChild(children[i--]);
			m_div.style.pixelTop=m_offset=0;
			return;
		}
		m_offset-=direction*m_height/m_fps
		m_div.style.pixelTop=m_offset;
	}
	function scroll()
	{
		if (!m_scrolling_interval_handle)
			m_scrolling_interval_handle = setInterval(scroll_step, m_scrolling_time/m_fps);
	}
	function go_back()
	{
		m_current--;
		if (m_current == -1)
			m_current = m_images.length-1;
		if (!m_main_img.prevSibling)
		{
			m_main_img = make_img(m_images[m_current]);
			m_div.insertBefore(m_main_img, m_div.firstChild);
			m_offset-=m_height;
			m_div.style.pixelTop=m_offset;
		} else {
			m_main_img = m_main_img.prevSibling;
		}
		m_frame_count-=m_fps;
		scroll();
	}
	function go_forward()
	{
		m_current++;
		if (m_current == m_images.length)
			m_current = 0;
		if (!m_main_img.nextSibling)
		{
			m_main_img = make_img(m_images[m_current]);
			m_div.appendChild(m_main_img);
		} else {
			m_main_img = m_main_img.nextSibling;
		}
		m_frame_count+=m_fps;
		scroll();
	}
	function start_slideshow()
	{
		if (m_slideshow_interval_handle)
			clearInterval(m_slideshow_interval_handle);
		if (m_slideshow_interval)
			m_slideshow_interval_handle = setInterval(go_forward, m_slideshow_interval+m_scrolling_time);
	}
	function ctor()
	{
		if (!m_outer_div || !(m_images instanceof Array) || m_images.length==0)
			return;
		document.write('<style>#'+m_outer_div_id+' img { height: '+m_outer_div.style.height+'; width: '+m_outer_div.style.width+'; } #'+m_outer_div_id+' {overflow:hidden;} #'+m_outer_div_id+'  div {position:relative;}</style>');
		m_outer_div.innerHTML = '';
		m_div = document.createElement('div');
		m_outer_div.appendChild(m_div);
		m_main_img = make_img(m_images[m_current]);
		m_div.appendChild(m_main_img);
		start_slideshow();
	}
//public:
	this.back = function()
	{
		go_back();
		start_slideshow();
	}
	this.forward = function()
	{
		go_forward();
		start_slideshow();
	}
//init:
	ctor();
}
//-->
</script>
</head>

<body>

<div id="scrollerdiv" style="height:300px;width:410;border:1px dotted black;"></div>
<script><!--
var scroller = new Scroller("scrollerdiv", 
	[
		'http://ois.org.ua/spravka/computer/java-script/img/img00001.jpg',
		'http://ois.org.ua/spravka/computer/java-script/img/img00002.jpg',
		'http://ois.org.ua/spravka/computer/java-script/img/img00003.jpg',
		'http://ois.org.ua/spravka/computer/java-script/img/img00004.jpg'
	]
);
//--></script>
<input type="button" value="Назад" onclick="scroller.back();">
<input type="button" value="Вперёд" onclick="scroller.forward();">

</body>
</html>

legolegs ★★★★★
() 
<div id=viewport style='display:none;'></div>
<script src=jquery___.js><script>
<script>
var nextImg = 0;
function fnNextImg () {
 if(nextImg > slideimage.Lenght) {
  nextImg=0;
 }
 if($('#viewport').html() != '') {
  $('#viewport').fadeOut('slow').html(''); 

} 
 $('#viewport').html('slideimages[nextImg++]').fadeIn('slow');

}
setTimeout(fnNextImg,120);
</script>
enep ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development