карусель

by AJIEKCEU

HTML

<div id='carousel_container'>
  <div id='left_scroll'><a href='' id="left" ><img src='http://yanovich.by/temp/left.png' /></a></div>
    <div id='carousel_inner'>
        <ul id='carousel_ul'>
            <li><a href='#'><img src='http://yanovich.by/temp/1.jpg' /></a></li>
            <li><a href='#'><img src='http://yanovich.by/temp/2.jpg' /></a></li>
            <li><a href='#'><img src='http://yanovich.by/temp/3.jpg' /></a></li>
            <li><a href='#'><img src='http://yanovich.by/temp/4.jpg' /></a></li>
            <li><a href='#'><img src='http://yanovich.by/temp/5.jpg' /></a></li>
            
            
      </ul>
    </div>
  <div id='right_scroll'><a href='' id="right"><img src='http://yanovich.by/temp/right.png' /></a></div>
  <input type='hidden' id='hidden_auto_slide_seconds' value=0 />
  </div>

CSS

#carousel_inner
{
	background:#F0F0F0;
	float:left;
	overflow:hidden;
	width:630px;
}

#carousel_ul
{
	left:0px;
	list-style-type:none;
	margin:0;
	padding:0 0 10px;
	position:relative;
	width:9999px;
}

#carousel_ul li
{
	background:#ccc;
	float:left;
	height:110px;
	margin:10px 5px;
	padding:0;
	width:200px;
}

#carousel_ul li img
{
	border:0;
	cursor:hand;
	margin-bottom:-4px;
}

#left_scroll,#right_scroll,#left,#right
{
	background:silver;
	float:left;
	height:130px;
	width:15px;
}

#left_scroll img,#right_scroll img
{
	border:0;
	cursor:hand;
}

JavaScript

footerLogoNext = $("#right");
footerLogoPrev = $("#left");
footerLogo = $("#carousel_ul");
footerLogoFirst =$("#carousel_ul li:first");
footerLogoLast =$("#carousel_ul li:last");
footerLogoContainerWidth = $("#carousel_ul li").outerWidth() + 10;

footerLogoNext.hover(function () {


       footerLogo.stop(true, false).animate({'left': -420}, {duration: 4000});          
    } , function () {
  $("#carousel_ul li:first").before($("#carousel_ul li:last"));

     footerLogo.stop(true, false);
 }
    );
footerLogoPrev.hover(function () {
       
        footerLogo.stop(true, false).animate({'left': + 0}, {duration: 4000});
    }, function () {
        
 $("#carousel_ul li:last").after($("#carousel_ul li:first"));
          

      footerLogo.stop(true, false);
   }

    );