Простое слайдшоу на xml

ГлавнаяJava скрипты → Простое слайдшоу на xml

В этом примере, я хочу Вам показать работу простого слайдшоу на xml, в которм показ слайдов осуществляется так же в автоматическом и ручном режиме с регулируемым временем показа, но без всякой анимации.

Данное слайдшоу состоит из одного java скрипта и xml файла, где в последнем и прописаны все наши картинки, которые по количеству можно добавлять без всяких ограничений. Сразу хочу отметить: показ слайдшоу совсем не возможен в очень старых версиях браузера.

Пример работы - Простое слайдшоу на xml


Теперь давайте рассмотрим все файлы по отдельности, где я постараюсь прокомментировать каждый.

Код для html


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Простое слайдшоу</title>
<style type="text/css">
h1{ font-size:24px; font-weight:bold; color:rgb(50,50,250); }
#contenitore{position:relative; margin:10px auto; width:500px; height:400px; overflow:hidden; border:1px solid; z-index:1;}
#contenitore:hover > #avanti div, #contenitore:hover >  #indietro div{display:block;} 
#box{position:absolute; left:50px; top:0;   width:400px; height:400px;  z-index:2;}
#box img{width:400px;  position:absolute; top:0; z-index:1;}
#avanti{
position:absolute; top:0; right:0; width:50px; height:100%;  text-align:center; 
background:white;  z-index:3; 
}
#avanti div{
margin:auto;
position:absolute; top:0; bottom:0; right:0; left:0;  width:0; height:0; 
border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #000; display:none;
}
#indietro{
position:absolute; top:0; left:0; width:50px; height:100%;  text-align:center; 
background:white;  z-index:3; 
}
#indietro div{
margin:auto;
position:absolute; top:0; bottom:0; right:0; left:0;  width:0; height:0; 
border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 50px solid #000; display:none; 
}
</style>
<script type="text/javascript" src="slide.js"> </script>
</head>
<body>
<h1>Простой слайшоу</h1>
<div id="contenitore">
	<div id="box"></div>
	<div id="avanti"><div></div></div> 
	<div id="indietro"><div></div></div> 
</div>
<script type="text/javascript">
var slider = new SlideImage('img_Slide.xml','box','avanti','indietro');
slider.slideAutomatico();
slider.fermaAutomatico();
slider.riprendiAutomatico();
</script>
</body>
</html>

Здесь Вы можете подправить под себя высоту и ширину в основном блоке и в блоке непосредственно для слайдов.

Далее рассмотрим следущий файл img_Slide.xml


<?xml version="1.0" encoding="utf-8"?>
<immagini>
	<immagine>
		<srcImg>batuffolo.jpg</srcImg>	
		<titolo>batuffolo</titolo>
		<altImg>batuffolo</altImg>
		<larghezza>100</larghezza>
		<altezza>100</altezza>
	</immagine>
	<immagine>
		<srcImg>epidermide.jpg</srcImg>	
		<titolo>epidermide</titolo>
		<altImg>epidermide</altImg>
		<larghezza>100</larghezza>
		<altezza>100</altezza>
	</immagine>
	<immagine>
		<srcImg>macchie.jpg</srcImg>	
		<titolo>macchie</titolo>
		<altImg>macchie</altImg>
		<larghezza>100</larghezza>
		<altezza>100</altezza>
	</immagine>
	<immagine>
		<srcImg>gocce.jpg</srcImg>	
		<titolo>gocce</titolo>
		<altImg>gocce</altImg>
		<larghezza>100</larghezza>
		<altezza>100</altezza>
	</immagine>
	<immagine>
		<srcImg>frecciaSu2.png</srcImg>	
		<titolo>freccia</titolo>
		<altImg>freccia</altImg>
		<larghezza>100</larghezza>
		<altezza>100</altezza>
	</immagine>
</immagini>

А в этом файле, Вы указываете свои картинки для показа, их размеры и названия.

А чтобы изменить время показа каждого слайда, Вам необходимо сделать нужные изменения в файле slide.js, который находится в архиве.

Данный скрипт слайшоу абсолютно не сложный, и я уверен, что у Вас с ним не будет проблем. А если всё-таки что-то будет не понятно, спрашивайте - я постараюсь помочь.


Скачать скрипт Простое слайдшоу на xml


Поделись ссылкой с друзьями:

Комментарии к статье