• Код
• Чистый код

  1.
<div id="starconteiner">
  2.
  3.
</div>

• Код
• Чистый код

  1.
<div id="starconteiner">
  2.
<img class="slyshow" alt="Футбол (англ. football, «ножной мяч»). В настоящее время самый популярный и массовый вид спорта в мире." src="images/1.jpg" />
  3.
<img class="slyshow" alt="Женщина юного возраста!" src="images/2.jpg" />
  4.
<img class="slyshow" alt="Виноградная улитка  — наземный брюхоногий моллюск отряда лёгочных улиток семейства гелицид." src="images/3.jpg" />
  5.
<img class="slyshow" alt="Красота!" src="images/4.jpg" />
  6.
<img class="slyshow" alt="Любовь — чувство, свойственное человеку, глубокая, самоотверженная привязанность к другому человеку..." src="images/5.jpg" />
  7.
<img class="slyshow" alt="Стоп!" src="images/6.jpg" />
  8.
</div>
  9.

• Код
• Чистый код

  1.
html {
  2.
	 height: 100%;
  3.
	 width:auto;
  4.
	}
  5.
	#starconteiner {
  6.
	 text-align:left;
  7.
	 position: relative; 
  8.
	 top:0px;
  9.
	 display:block;
10.
 width: 400px; /* Major browsers other than IE 6 and below respect the importance immediately */
11.
 height:250px;
12.
 overflow:hidden;
13.
}
14.
.slyshow{
15.
 position:absolute;
16.
 cursor:pointer;
17.
 border:2px solid #fff;
18.
}
19.
.slycomment{
20.
 padding:10px;
21.
 background:#000;
22.
 position:absolute;
23.
 bottom:0%;
24.
 cursor:pointer;
25.
 width:300px;
26.
 height:30%;
27.
 z-index:555;
28.
 color:#fff;
29.
 font:1.5em Arial,sans-serif;
30.
 filter:alpha(opacity=50);
31.
 opacity:0.5;
32.
 -moz-border-radius: 0px  10px 0px 0px;
33.
 -webkit-border-radius: 0px  10px 0px 0px;
34.
  box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
35.
 -moz-box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
36.
 -webkit-box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
37.
}
38.

• Код
• Чистый код

  1.
$(function(){
  2.
//общ переменные
  3.
var ssec = 5; // время перелистывания
  4.
var snum = 6; // кол картинок
  5.
var smargin = 40; // отсутупы между картинками в пикселях
  6.
var sborder = 2; // рамка картинок в пикселях
  7.
var smleft = (snum-1)*smargin;
  8.
  9.
//
10.
var slykoef = smargin / 10;
11.
var sc = $("#starconteiner");
12.
var ss = $(".slyshow");
13.
$("#starconteiner").width(400+smleft);
14.
//слайдер
15.
var p = sc.position();
16.
var myInterval = setInterval(triggerclick,ssec*1000)
17.
	sc.append("<div class='slycomment'  style='opacity:0.5;filter:alpha(opacity=50);margin-left:"+(smleft+sborder)+"px'>"+$(".slyshow:last").attr('alt')+"</div>");
18.
ss.addClass("slyleft");
19.
ss.each(function(i){
20.
$(".slyshow:eq("+i+")").css({"margin-left":""+(slykoef * i)+"0px","z-index":i});
21.
});
22.
23.

• Код
• Чистый код

  1.
ss.each(function(i){
  2.
$(".slyshow:eq("+i+")").css({"margin-left":""+(slykoef * i)+"0px","z-index":i});
  3.
});
  4.
  5.

• Код
• Чистый код

  1.
ss.mouseover(function(){
  2.
..... основная функция слайдера ...
  3.
});
  4.
  5.

• Код
• Чистый код

  1.
if($(this).hasClass("slyactive")) return false
  2.
		$(".slycomment").hide();
  3.
		ss.removeClass("slyactive");
  4.
		$(this).addClass("slyactive");
  5.
		
  6.
	if($(this).hasClass("slyleft"))  {
  7.
			$(".slycomment").css("margin-left",parseInt($(".slyactive").css("margin-left"))+sborder).text($(".slyactive").attr('alt'));
  8.
  9.
			$(this).nextAll(".slyshow").each(function(i){
10.
		$(this).removeClass("slyleft").addClass("slyright");
11.
		m = 40+(slykoef * ($(this).index()-1))+"0";
12.
		$(this).stop().animate({"margin-left":""+m+"px"},function(){
13.
		$(".slycomment").fadeIn("slow");
14.
		});
15.
});
16.
} 
17.
else {
18.
	if($(this).hasClass("slyright"))  {
19.
	
20.
	 $(this).removeClass("slyright").addClass("slyleft");
21.
	 $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft");
22.
	 m = (slykoef * ($(this).index()))+"0";
23.
	  $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt'));
24.
	 $(this).stop().animate({"margin-left":""+m+"px"},function(){
25.
	 $(".slycomment").fadeIn("slow");
26.
	 });
27.
28.
			$(this).prevAll(".slyshow").each(function(i){
29.
			m = (slykoef * ($(this).index()))+"0";
30.
			$(this).stop().animate({"margin-left":""+m+"px"},function(){
31.
		$(".slycomment").fadeIn("slow");
32.
			});
33.
34.
	});
35.
	}
36.
}
37.
38.

• Код
• Чистый код

  1.
if($(this).hasClass("slyactive")) return false
  2.

  2.
		$(".slycomment").hide();
  3.
		ss.removeClass("slyactive");
  4.
		$(this).addClass("slyactive");

  6.
	if($(this).hasClass("slyleft"))  {
  7.
			$(".slycomment").css("margin-left",parseInt($(".slyactive").css("margin-left"))+sborder).text($(".slyactive").attr('alt'));
  8.
  9.
			$(this).nextAll(".slyshow").each(function(i){
10.
			$(this).removeClass("slyleft").addClass("slyright");
11.
			m = 40+(slykoef * ($(this).index()-1))+"0";
12.
			$(this).stop().animate({"margin-left":""+m+"px"},function(){
13.
			$(".slycomment").fadeIn("slow");
14.
			});
15.
	});
16.
	}

17.
	else {
18.
		if($(this).hasClass("slyright"))  {
19.
		
20.
		 $(this).removeClass("slyright").addClass("slyleft");
21.
		 $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft");
22.
		 m = (slykoef * ($(this).index()))+"0";
23.
		  $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt'));
24.
		 $(this).stop().animate({"margin-left":""+m+"px"},function(){
25.
		 $(".slycomment").fadeIn("slow");
26.
		 });
27.
28.
				$(this).prevAll(".slyshow").each(function(i){
29.
				m = (slykoef * ($(this).index()))+"0";
30.
				$(this).stop().animate({"margin-left":""+m+"px"},function(){
31.
			$(".slycomment").fadeIn("slow");
32.
				});
33.
34.
		});
35.
		}
36.
	}
37.
	

20.
		 $(this).removeClass("slyright").addClass("slyleft");
21.
		 $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft");
22.
		 m = (slykoef * ($(this).index()))+"0";
23.
		  $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt'));
24.
		 $(this).stop().animate({"margin-left":""+m+"px"},function(){
25.
		 $(".slycomment").fadeIn("slow");
26.
		 });
27.

  1.
//интервал
  2.
function triggerclick() {
  3.
ret = Math.floor(Math.random()*snum);
  4.
$(".slyshow:eq("+ret+")").trigger("mouseover");
  5.
}
  6.
sc.mousemove(function(){
  7.
clearInterval(myInterval)
  8.
});
  9.
sc.mouseleave(function(){
10.
clearInterval(myInterval)
11.
myInterval = setInterval(triggerclick,ssec*1000)
12.
});
13.
	

  1.
$(function(){
  2.
...слайдер...
  3.
});
  4.
	

• Код
• Чистый код

  1.
$(function(){
  2.
//общ переменные
  3.
var ssec = 5; // время перелистывания
  4.
var snum = 6; // кол картинок
  5.
var smargin = 40; // отсутупы между картинками в пикселях
  6.
var sborder = 2; // рамка картинок в пикселях
  7.
var smleft = (snum-1)*smargin;
  8.
  9.
//
10.
var slykoef = smargin / 10;
11.
var sc = $("#starconteiner");
12.
var ss = $(".slyshow");
13.
$("#starconteiner").width(400+smleft);
14.
//слайдер
15.
var p = sc.position();
16.
var myInterval = setInterval(triggerclick,ssec*1000)
17.
	sc.append("<div class='slycomment'  style='opacity:0.5;filter:alpha(opacity=50);margin-left:"+(smleft+sborder)+"px'>"+$(".slyshow:last").attr('alt')+"</div>");
18.
		ss.addClass("slyleft");
19.
		ss.each(function(i){
20.
		$(".slyshow:eq("+i+")").css({"margin-left":""+(slykoef * i)+"0px","z-index":i});
21.
		});
22.
		ss.mouseover(function(){
23.
		if($(this).hasClass("slyactive")) return false
24.
			$(".slycomment").hide();
25.
			ss.removeClass("slyactive");
26.
			$(this).addClass("slyactive");
27.
			
28.
		if($(this).hasClass("slyleft"))  {
29.
				$(".slycomment").css("margin-left",parseInt($(".slyactive").css("margin-left"))+sborder).text($(".slyactive").attr('alt'));
30.
	
31.
				$(this).nextAll(".slyshow").each(function(i){
32.
				$(this).removeClass("slyleft").addClass("slyright");
33.
				m = 40+(slykoef * ($(this).index()-1))+"0";
34.
				$(this).stop().animate({"margin-left":""+m+"px"},function(){
35.
				$(".slycomment").fadeIn("slow");
36.
				});
37.
		});
38.
		} 
39.
		else {
40.
			if($(this).hasClass("slyright"))  {
41.
			
42.
			 $(this).removeClass("slyright").addClass("slyleft");
43.
			 $(this).prevAll(".slyshow").removeClass("slyright").addClass("slyleft");
44.
			 m = (slykoef * ($(this).index()))+"0";
45.
			  $(".slycomment").css("margin-left",parseInt(m)+sborder).text($(".slyactive").attr('alt'));
46.
			 $(this).stop().animate({"margin-left":""+m+"px"},function(){
47.
			 $(".slycomment").fadeIn("slow");
48.
			 });
49.
	
50.
					$(this).prevAll(".slyshow").each(function(i){
51.
					m = (slykoef * ($(this).index()))+"0";
52.
					$(this).stop().animate({"margin-left":""+m+"px"},function(){
53.
				$(".slycomment").fadeIn("slow");
54.
					});
55.
	
56.
			});
57.
			}
58.
		}
59.
	
60.
		});
61.
	//интервал
62.
	function triggerclick() {
63.
	ret = Math.floor(Math.random()*snum);
64.
	$(".slyshow:eq("+ret+")").trigger("mouseover");
65.
	}
66.
	sc.mousemove(function(){
67.
	clearInterval(myInterval)
68.
	});
69.
	sc.mouseleave(function(){
70.
	clearInterval(myInterval)
71.
	myInterval = setInterval(triggerclick,ssec*1000)
72.
	});
73.
	});
74.
		
75.