Слайдер на 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); }
|