sti111,
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.workwebsite.ru/scripts/fade.php" />
<style type="text/css">a#vlb{display:none}
#wowslider-container{border:10px solid #ffffff;height:403px;margin:0 auto;position:relative;width:604px;z-index:100}
* html #wowslider-container{background:none}
#wowslider-images{height:403px;overflow:hidden;position:relative;width:604px}
#wowslider-images a{color:transparent}
#wowslider-images img{border:0 none;left:0;top:0}
#wowslider-container a{border:medium none;outline:medium none;text-decoration:none}
#wowslider-container .ws_bullets{float:left;font-size:0;padding:0;position:absolute;right:5px;top:10px;z-index:40}
#wowslider-container .ws_bullets a{background:rgba(0,0,0,0) url("bullet.png") repeat scroll 0 0;float:left;height:21px;margin-right:5px;text-indent:-1000px;width:21px}
* html #wowslider-container .ws_bullets a{background:rgba(0,0,0,0) url("bullet.gif") repeat scroll 0 0}
#wowslider-container .ws_bullets a.ws_selbull{background:rgba(0,0,0,0) url("bullet_active.png") repeat scroll 0 0}
* html #wowslider-container .ws_bullets a.ws_selbull{background:rgba(0,0,0,0) url("bullet_active.gif") repeat scroll 0 0}
#wowslider-container a.ws_next{background:url("arrows.png");display:none;height:45px;margin-top:-22px;position:absolute;top:50%;width:45px;z-index:1001}
#wowslider-container a.ws_prev{background:url("arrows.gif");display:none;height:45px;margin-top:-22px;position:absolute;top:50%;width:45px;z-index:1001}
#wowslider-container a.ws_next{right:10px}
#wowslider-container a.ws_prev{left:10px}
* html #wowslider-container a.ws_next,* html #wowslider-container a.ws_prev,#wowslider-container:hover a.ws_next,#wowslider-container:hover a.ws_prev{display:block}
#wowslider-container .ws-title{background:#fff none repeat scroll 0 0;border-radius:0 8px 8px 0;bottom:25px;color:#000;font:14px/18px Tahoma,Arial,Helvetica;left:0;letter-spacing:1px;margin-right:30px;opacity:0.8;padding:10px;position:absolute;text-align:left;text-shadow:0 0 2px #ffffff;z-index:50}
#wowslider-container .ws-title div{font-size:12px;padding-top:5px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="wowslider-container">
<div id="wowslider-images">
<a href="#"><img src="001.jpg" alt="фото 001"></a>
<a href="#"><img src="002.jpg" alt="фото 002"></a>
<a href="#"><img src="003.jpg" alt="фото 003"></a>
</div>
<div class="ws_bullets">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<script>
ws_fade = function (options) {
var $ = jQuery;
options.duration = options.duration || 1000;
var Images = [
];
var curIdx = 0;
this.init = function (aCont) {
Images = $('img', aCont).get();
$(Images).each(function (Index) {
if (!Index) {
$(this).show();
} else {
$(this).hide();
}
});
};
this.go = function (new_index) {
$(Images).each(function (Index) {
if (Index == new_index) {
$(this).fadeIn(options.duration);
}
if (Index == curIdx) {
$(this).fadeOut(options.duration);
}
});
curIdx = new_index;
return true;
};
}; // -----------------------------------------------------------------------------------
function WowSlider(options) {
var $ = jQuery;
options = options || {
};
var $Elements = $('#wowslider-images A');
$Elements.each(function (index) {
var inner = $(this).html() || '';
var pos = inner.indexOf('>', inner);
if (pos >= 0) {
$(this).data('descr', inner.substr(pos + 1));
if (pos < inner.length - 1) {
$(this).html(inner.substr(0, pos + 1));
}
}
$(this).css({
'font-size': 0
});
});
var elementsCount = $Elements.length;
var $ws_container = $('#wowslider-container');
var frame = $('A#wowslider-frame').get(0);
var curIdx = 0;
function go(index) {
if (curIdx == index) {
return;
}
var current = effect.go(index);
if (!current) {
return;
}
if (typeof current != 'object') {
current = $Elements[index];
}
curIdx = index;
go2(index);
if (options.caption) {
setTitle(current);
}
}
function go2(index) {
if (options.bullets) {
setBullet(index);
}
if (frame) {
frame.setAttribute('href', $Elements.get(index).href);
}
}
var autoPlayTimer;
function restartPlay() {
stopPlay();
if (options.autoPlay) {
autoPlayTimer = setTimeout(function () {
go(curIdx < elementsCount - 1 ? curIdx + 1 : 0);
restartPlay();
}, options.delay + options.duration);
}
}
function stopPlay() {
if (autoPlayTimer) {
clearTimeout(autoPlayTimer);
}
autoPlayTimer = null;
}
$Elements.find('IMG').css('position', 'absolute');
var effect = new window['ws_' + options.effect](options);
effect.init($('#wowslider-images'));
$Elements.find('IMG').css('visibility', 'visible');
var ic = c = $('#wowslider-images');
var t = '';
c = t ? $('<div></div>') : 0;
if (c) {
c.css({
position: 'absolute',
right: '2px',
bottom: '2px',
padding: '0 0 0 0'
});
ic.append(c);
}
if (c && document.all) {
var f = $('<iframe src="javascript:false"></iframe>');
f.css({
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
filter: 'alpha(opacity=0)'
});
f.attr({
scrolling: 'no',
framespacing: 0,
border: 0,
frameBorder: 'no'
});
c.append(f);
}
var d = c ? $(document.createElement('A')) : c;
if (d) {
d.css({
position: 'relative',
display: 'block',
'background-color': '#E4EFEB',
color: '#837F80',
'font-family': 'Lucida Grande,sans-serif',
'font-size': '11px',
'font-weight': 'normal',
'font-style': 'normal',
'-moz-border-radius': '5px',
'border-radius': '5px',
padding: '1px 5px',
width: 'auto',
height: 'auto',
margin: '0 0 0 0',
outline: 'none'
});
d.attr({
href: 'ht' + 'tp://' + t.toLowerCase()
});
d.html(t);
d.bind('contextmenu', function (eventObject) {
return false;
});
c.append(d);
}
if (options.controls) {
var $next_photo = $('<a href="#" class="ws_next">' + options.next + '</a>');
var $prev_photo = $('<a href="#" class="ws_prev">' + options.prev + '</a>');
$ws_container.append($next_photo);
$ws_container.append($prev_photo);
$next_photo.bind('click', function (e) {
stopPlay();
e.preventDefault();
go(curIdx < elementsCount - 1 ? curIdx + 1 : 0);
restartPlay();
});
$prev_photo.bind('click', function (e) {
stopPlay();
e.preventDefault();
go(curIdx > 0 ? curIdx - 1 : elementsCount - 1);
restartPlay();
});
}
function initBullets() {
$bullets = $('.ws_bullets a', $ws_container);
$bullets.each(function (index) {
$(this).bind('click', function (e) {
stopPlay();
e.preventDefault();
go(index);
restartPlay();
});
});
}
function setBullet(new_index) {
$('.ws_bullets A', $ws_container).each(function (index) {
if (index == new_index) {
$(this).addClass('ws_selbull');
} else {
$(this).removeClass('ws_selbull');
}
});
}
if (options.caption) {
$caption = $('<div class=\'ws-title\' style=\'display:none\'></div>');
$ws_container.append($caption);
$caption.bind('mouseover', function (e) {
stopPlay();
});
$caption.bind('mouseout', function (e) {
restartPlay();
});
}
function setTitle(A) {
var title = $('img', A).attr('title');
var descr = $(A).data('descr');
var $Title = $('.ws-title', $ws_container);
$Title.hide();
if (title || descr) {
$Title.html((title ? '<span>' + title + '</span>' : '') + (descr ? '<div>' + descr + '</div>' : ''));
$Title.fadeIn(400);
}
}
if (options.bullets) {
initBullets();
}
go2(0);
if (options.caption) {
setTitle($Elements[0]);
}
restartPlay();
}
var wowSlider = new WowSlider({
effect: 'fade',
prev: '',
next: '',
duration: 10 * 100,
delay: 10000,
outWidth: 604,
outHeight: 403,
width: 604,
height: 403,
caption: true,
controls: true,
autoPlay: true,
bullets: true
});
</script>
</body>
</html>
