[JS] ужасный код, надо быстренько почистить

PooH

привести в более-менее божеский вид и немного пооптимизировать
сделайте несколько замечаний, что больше всего бросается в глаза
накатал за 30 минут
это галерея с двумя слайдерами (один зацикленный, другой нет)
как это выглядит: http://php-exe-ru.1gb.ru/slider.php
вот сам код:




jQuery(document).ready(function($) 

{

		$.fn.sanCarousel = function(params) {

		

			//init params

			var params = $.extend({

			

				elem: '.minor-image',

				speed: 450,

				isCycled: false,

				

			}, params);

			

			//init internal vars

			var line = params.line;

			var left = params.left;

			var right = params.right;

			var scroll = params.scroll;

			var window = this;

			var elems = line.find(params.elem);

			

			//prepare line for looping; inserting edge elements for pseudo looping

			if(params.isCycled) {

			

				//calculate init line width - need for proper looping

				var lineInitW = 0;

				line.children.last.each(function{

				

					lineInitW = $(this).position.left + $(this).outerWidth(true);

					

				});

				

				var n = parseInt(elems.length);

				

				var times = parseInt(window.width/lineInitW);

				for(var times = parseInt(window.width/lineInitW); times > 0; times--) {

				

					line.append(elems.clone;

					elems = line.find(params.elem);

					

				}

				

				var delta = window.width - $(elems[n-1]).outerWidth;

				for(var i = 0; delta > 0 && i<n; i++ ) {

					

					var shift = $(elems[i]).outerWidth;

					line.width( line.width + shift ).append($(elems[i]).clone;

					delta -= shift;

					

				}

								

				var delta = window.width - $(elems[0]).width;

				var startLeft = 0;

				for(var i = 0; delta > 0 && i<n; i++ ) {

					

					var shift = $(elems[n - 1 - i]).outerWidth;

					line.width( line.width + shift ).prepend($(elems[n - 1 - i]).clone;

					delta -= shift;

					startLeft -= shift;

					

				}

				

				//move line to the first element

				line.css('left', startLeft);

				

				left.show; // enables the controls

				right.show;

				

			} else { //prepare line in not-looping case

				

				left.hide;

				right.hide;

				

				left.each(function {

				

					var lineWidth = line.width;

					

					if(lineWidth==0) { // really need to rewrite this!

					

						line.children.last.each(function{

						

							lineWidth = $(this).position.left + $(this).outerWidth(true);

							

						});

						

					}

					

					if(lineWidth - (line.position.left) > window.height { //checks if we really need right button

					

						$(this).show;

						

					}

					

				});



				scroll = line.width/(parseInt(line.width/scroll;

				

			}

			

			//recalculate width for float elements

			line.children.last.each(function{

			

				var lineWidth = $(this).position.left + $(this).outerWidth(true);

				line.css("width", lineWidth+"px");	

						

			});

				

			//bind controls

			left.click(function {

			

				var lw = line.width;

				var ll = line.stop(true, false).position.left;

				var ml = scroll; // our frame or scroll distance

				var ww = $(window).width;

				var anim = false;

				

				if(params.isCycled) { //for loops

					

					anim = true

					ml = scroll;

					

					if( lw - ( -ll ) - ww < scroll) {

						

						console.log(lineInitW);

						line.css("left", line.position.left + lineInitW + "px" ); //loops

					

					} 

					

				} else { // not for loops 

				

					if(lw - ( -ll ) > ww ) {

					

						anim = true;

						

						if(ml >= lw - (-ll) - ww) {

						

							ml = lw - (-ll) - ww;

							left.hide;

							

						} else {

						

							left.show;

							

						}

					}

										

					right.show;

				}			

					

				if(anim) {

				

					line.animate({

					

						left: '-='+ml

						

					}, params.speed);

					

				}

				

			});

			

			right.click(function {

			

				var lw = line.width;

				var ll = line.stop(true, false).position.left;

				var ml = scroll; // our frame or scroll distance

				var ww = $(window).width;

				var anim = false;

				

				if(params.isCycled) { //for loops

					

					anim = true

					ml = scroll;

					

					if( ( -ll ) < scroll) {

					

						line.css("left", line.position.left - lineInitW + "px" ); //loops

					

					} 

					

				} else { // not for loops 

				

					if( ( -ll ) > 0 ) {

					

						anim = true;

						

						if(ml >= (-ll) ) {

						

							ml = (-ll);

							right.hide;

							

						} else {

						

							right.show;

							

						}

						

					}

										

					left.show;

				}			

					

				if(anim) {

				

					line.animate({

					

						left: '+='+ml

						

					}, params.speed);

					

				}

				

			});

			

			elems.live("click", function{

			

				var bigImgSrc = $(this).find("img").attr("rel");

				

				params.bigImg.hide.empty.append("<img src='" + bigImgSrc + "' style='margin:0px auto;display:block;'/>").fadeIn;

			

			});

			

			return this;

		}

				

				

		$('div#window').each(function{

			var ret = $(this).sanCarousel({

				line: $("div#line"

				left: $("div#left"

				right: $("div#right"

				bigImg: $("div#big"

				scroll: 200,

				elem: ".minor-image",

				isCycled: true,

			});

		});		

		

		$('div#window2').each(function{

			var ret = $(this).sanCarousel({

				line: $("div#line2"

				left: $("div#left2"

				right: $("div#right2"

				bigImg: $("div#big"

				scroll: 200,

				elem: ".minor-image",

				isCycled: false,

			});

		});	

				

				

				

});

вот код странички




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html dir="ltr" lang="ru-RU">

<head>

<link rel="profile" href="http://gmpg.org/xfn/11" />

<title>Slider</title>



<>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>





</head>



<body class="home blog">

	<div style="width:100%;">

		<div id="sliders">

			<div id="window" style="width:500px;margin:0px auto;position:relative;overflow:hidden;">

				<div id="line" style="position:relative;width:1500px;height:110px;">

					<div class="minor-image" style="float:left;width:110px;"><img src="images/1_.jpg" rel="images/1.jpg"/></div>

					<div class="minor-image" style="float:left;width:110px;"><img src="images/2_.jpg" rel="images/2.jpg"/></div>

					<div class="minor-image" style="float:left;width:110px;"><img src="images/3_.jpg" rel="images/3.jpg"/></div>

					<div class="minor-image" style="float:left;width:110px;"><img src="images/4_.jpg" rel="images/4.jpg"/></div>

					<div class="minor-image" style="float:left;width:110px;"><img src="images/5_.jpg" rel="images/5.jpg"/></div>

					<div class="minor-image" style="float:left;width:110px;"><img src="images/6_.jpg" rel="images/6.jpg"/></div>

					<div class="minor-image" style="float:left;width:110px;"><img src

0000

Looped-версия имеет ошибку - второй ряд пропадает. Полистай - увидишь.
P.S. FF5

VitMix

ужасный код, надо быстренько почистить
Ну так почисти, если это быстренько, а потом и выкладывай. Тогда и посмотрим.

PooH

Looped-версия имеет ошибку - второй ряд пропадает. Полистай - увидишь.
P.S. FF5
не могу поймать ошибку
переформулирую вопрос - где прочитать про стандарты - оформление, очевидные вещи, традиции и т.д.
js изучал методом тыка, нету какого-то последовательного понимания

qton

а нафига изобретать велосипед?

PooH

готовые решения зачастую бывают неудобными/не обладают достаточной гибкостью
тема уже неактуальна - код привел в более-менее нормальное состояние

Papazyan

готовые решения зачастую бывают неудобными/не обладают достаточной гибкостью
Ну да, только велосипеды всегда удобные и гибкие, особенно когда их пишет новичек в языке.
Оставить комментарий
Имя или ник:
Комментарий: