Слайдер на jquery

 

Для одного проекта написал слайдер картинок в портфолио...

Код css :

 

Код html :

 

<div id="navigation">   
    <div id="im_prev" class="nl"></div>
    <div id="im_next" class="nr"></div>                     
 </div>
<div id="conteiner">
    <div id="imagemain"><img src="картинка" border="0"></div>
</div>

 

Код js :

 

var images= Array();
  
var images=[
'/pic/01_img.jpg', 
'/pic/02_img.jpg', 
'/pic/03_img.jpg', 
'/pic/04_img.jpg'
];

// листалка картинок далее
$("#im_next").click(function(){

var totalim=parseInt( $("span#totalimg").text() );
var indexim=parseInt( $("span#activeimg").text() );

if(totalim>indexim)
{
     $("span#activeimg").text(indexim+1);
     ShowImage(images[indexim],images_name[indexim]);

if(totalim==(indexim+1))
{
     $("span#nextimg").html('<img src="/images/leftd.jpg" border="0" >');
       
}
     $("span#previmg").attr("class","menu_pic_r");
}
else
{
    $("span#activeimg").text(1);
    ShowImage(images[0],images_name[0]);
}

});

// листалка картинок обратно
$("#im_prev").click(function(){

var totalim=parseInt( $("span#totalimg").text() );
var indexim=parseInt( $("span#activeimg").text() );

if(indexim>1)
{
     $("span#activeimg").text(indexim-1);

     ShowImage(images[indexim-2],images_name[indexim-2]);

     if(1==(indexim-1))
     {
         $("span#previmg").removeClass("menu_pic_r").attr("class","menu_pic_l");
         $("#left_image_s_conteiner").css("border-left","0");
     }
     $("span#nextimg").attr("class","menu_pic_r") ;
}
else 
{
   $("span#activeimg").text(totalim);
   ShowImage(images[totalim-1],images_name[totalim-1]);
}
});


function ShowImage(url,n){
  $('#conteiner').find("#imagemain").remove();

  //показываем индикатор загрузки
  
  $('#conteiner').append('<div id="loading"></div>');
  $('#conteiner').append('<div id="imagemain"></div>');
  $('#conteiner #imagemain').hide();

  var img = new Image();

  //добавляем элемент картинки на страницу
  $(img).load(function(){
    //после того как картинка загрузится
    $('#conteiner #loading').hide();//убираем индикатор загрузки
    $('#conteiner #imagemain').html(this).fadeIn("fast");//вставляем картинку в див
    $('#image_name').html(n);
     }).attr('src', url);

}

 






У данной записи пока нет ниодного комментария