Смена нескольких изображений внутри блока. Эффект Crossslide.

Вариант 1. Изображение постепенно сменяется следующим:

После скачивания, разархивировать материал, открыть папку crossslide, проверить файл demo.html в вашем браузере.  Всё должно изумительно работать.

Инструкция по установке (вариант 1)

1. Содержимое папок js с файлами скриптов и images с изображениями, закачиваем в одноименные папки сайта, которые находятся в корневой папке.

2. Подключаем jQuery и скрипты (в head):

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cross-slide.js"></script>

3. Прописываем функцию вызова эффекта и необходимые стили (в head). Стили все-таки лучше внести в общий файл стилей сайта style.css, чтобы не ругался валидатор, если Вы их расположите в разделе body. В скриптах проверьте пути и имена файлов (папка / файл изображения), а в стилях можете исправить ширину и высоту блока:

<script type="text/javascript">
  $(function() {
$('#test1').crossSlide({
  sleep: 2,
  
 fade: 1
}, [
  { src: 'images/1.jpg' },
  { src: 'images/2.jpg'   },
  { src: 'images/3.jpg'   },
  { src: 'images/4.jpg'  },
  { src: 'images/5.jpg'  },
  { src: 'images/19.jpg'  },
  { src: 'images/20.jpg'  },
  { src: 'images/6.jpg' }
]);

	  });

</script>

 <style type="text/css">
   #test1 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 550px;
    height: 344px;
  }
</style>

4. В том месте страницы (в body), где мы желаем видеть картинку с эффектом ставим код с нужным ID:

<div id="test1">Если изображения не видно, обновите страницу</div>

Вариант 2. Эффект приближения и отдаления:

Вариант 3. Изображение меняется внутри блока:

Представленная выше инструкция действительна и для остальных вариантов (2-го и 3-го), при условии смены вариантов стилей и скриптов, которые присутствуют в скачанном вами архиве.

Благодарю за внимание. Используйте эффект Crossslide на своих сайтах. L.M.