Loading





Форекс с Альпари

eTXT




Анкетка


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


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

Если изображения не видно, обновите страницу


Исходники (2.0 мб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


После скачивания, разархивировать материал, открыть папку 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>

В рассматриваемом примере библиотека jQuery (jquery-1.3.2.min.js) подключается локально. Вы вправе использовать другие варианты подключения. Об этом прочтите здесь.

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.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка