Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.12.2010, 05:47
Новичок на форуме
Отправить личное сообщение для Russianmaniac Посмотреть профиль Найти все сообщения от Russianmaniac
 
Регистрация: 27.11.2010
Сообщений: 9

смена background-image по клику на кноп-впер,назад, смена при нажатии на вперед и наз
Нужна помощь в создании скрипта для смена 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, 29.12.2010 в 17:51.
Ответить с цитированием
  #2 (permalink)  
Старый 29.12.2010, 17:53
Новичок на форуме
Отправить личное сообщение для Russianmaniac Посмотреть профиль Найти все сообщения от Russianmaniac
 
Регистрация: 27.11.2010
Сообщений: 9

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


$(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;
});
})
Ответить с цитированием
  #3 (permalink)  
Старый 29.12.2010, 19:30
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Чтобы по кругу - это как-то так:
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 ]+')' )

Последний раз редактировалось Sweet, 30.12.2010 в 01:04. Причина: to monolithed: исправился)
Ответить с цитированием
  #4 (permalink)  
Старый 29.12.2010, 22:15
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от Sweet
If(imageIndex === images.length - 1) imageIndex = 0;
опечатался
Ответить с цитированием
  #5 (permalink)  
Старый 30.12.2010, 13:34
Новичок на форуме
Отправить личное сообщение для Russianmaniac Посмотреть профиль Найти все сообщения от Russianmaniac
 
Регистрация: 27.11.2010
Сообщений: 9

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

$(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;
     });
})
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическая смена картинок через заданное время herotic Элементы интерфейса 45 15.05.2020 16:44
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08