смена background-image по клику на кноп-впер,назад, смена при нажатии на вперед и наз

[Russianmaniac]

Нужна помощь в создании скрипта для смена background-image определенного DIV по клику на кнопки "фон div вперед" и "фон div назад", и по мере возможности так ,чтобы не загружать все картинки,чтобы они постепенно качались , чтобы экономить трафик.

стиль див на котором должно меняться фон -page_centr_23

Скрипт написать помогли, но не парвильно работает (

$(function (){
var images = [
   'img/fon/fon_img40.jpg',
   'img/fon/fon_img41.jpg',
   'img/fon/fon_img42.jpg',
   ],
   $page_centr_23 = $('.page_centr_23'),
   imageIndex = 0;
$('.image_change').click(function(){
   if( $(this).attr('rel') == 'next' && imageIndex  < images.length )
  
   
   {
       $page_centr_23.css('background-image', 'url('+'img/fon/fon_img40.jpg'[++imageIndex ]+')' )
   }else if( $(this).attr('rel') == 'prev' && imageIndex  > 0 ){
       $page_centr_23.css('background-image', 'url('+images[--imageIndex ]+')' )
   }
   return false;
})
})

а сами кнопки делал так -

<a href="#"><img  src="/img/js_view_photo.gif" alt="delete" border="0" class="image_change" rel="next" /></a>

[Russianmaniac]

помогли доделать , а как теперь сделать атк чтобы изображения фона шли по кругу ? а то щас после последнего фото белый прстой фон

$(function (){
var images = [
  '/img/fon/fon_img40.jpg',
   '/img/fon/fon_img41.jpg',
   '/img/fon/fon_img42.jpg',
   '/img/fon/fon_img23.jpg',
  ],
 $page_centr_23 = $('.page_centr_23'),
  imageIndex = 0;
$('.image_change').click(function(){
  if( $(this).attr('rel') == 'next' && imageIndex  < images.length ) {
     $page_centr_23.css('background-image', 'url('+images[++imageIndex ]+')' )
  }else if( $(this).attr('rel') == 'prev' && imageIndex  > 0 ){
     $page_centr_23.css('background-image', 'url('+images[--imageIndex ]+')' )
  }
  return false;
});
})

[Sweet]

Чтобы по кругу - это как-то так:

if( $(this).attr('rel') == 'next' && imageIndex  < images.length ) {
    if(imageIndex === images.length - 1) imageIndex = 0;
    else imageIndex++;
    $page_centr_23.css('background-image', 'url('+images[imageIndex]+')' )

А чтобы после последнего ничего не лезло, то так:

if( $(this).attr('rel') == 'next' && imageIndex  < images.length - 1 ) {
    $page_centr_23.css('background-image', 'url('+images[++imageIndex ]+')' )

[monolithed]

If(imageIndex === images.length - 1) imageIndex = 0;

опечатался

[Russianmaniac]

Большое спасибо за помощь , без вас бы не разобрался с этим кодом. на другом форуме помогли вот с этим кодом, думаю его оставлю .

$(function (){
var images = [
  '/img/fon/fon_img40.jpg',
   '/img/fon/fon_img41.jpg',
   '/img/fon/fon_img42.jpg',
   '/img/fon/fon_img23.jpg',
  ],
 $page_centr_23 = $('.page_centr_23'),
 imageIndex = 0;

$('a.image_change').click(function() {

     if ($(this).attr('rel') == 'next')
      {      
	   if (imageIndex  < images.length - 1) 
	 
	   {
        $page_centr_23.css('background-image', 'url('+images[++imageIndex ]+')')
       }else{
        imageIndex = 0;
        $page_centr_23.css('background-image', 'url('+images[imageIndex]+')');
       }
      };
       
     if($(this).attr('rel') == 'prev')
      {
       if (imageIndex  > 0) {
        $page_centr_23.css('background-image', 'url('+images[--imageIndex ]+')')
       }else{
        imageIndex  = images.length - 1 ;
        $page_centr_23.css('background-image', 'url('+images[imageIndex]+')');
      }
       }
       return false;
     });
})