Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 14.01.2016, 16:32
Новичок на форуме
Отправить личное сообщение для sti111 Посмотреть профиль Найти все сообщения от sti111
 
Регистрация: 18.03.2014
Сообщений: 8

Вот не в целях рекламы, взял отсюда. Вроде все устраивает кроме скорости смены картинки http://www.workwebsite.ru/css/avtoma...-i-jquery.html
Ответить с цитированием
  #12 (permalink)  
Старый 14.01.2016, 16:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #13 (permalink)  
Старый 14.01.2016, 16:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sti111,
смотрите что у вас не так
Ответить с цитированием
  #14 (permalink)  
Старый 18.01.2016, 08:33
Новичок на форуме
Отправить личное сообщение для sti111 Посмотреть профиль Найти все сообщения от sti111
 
Регистрация: 18.03.2014
Сообщений: 8

Сообщение от рони Посмотреть сообщение
sti111,
смотрите что у вас не так
Все разобрался!!!
Просто огромнейшее спасибо! Даже не ожидал что остались еще добрые люди на этой планете
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическая смена картинок через заданное время herotic Элементы интерфейса 45 15.05.2020 16:44
Смена картинок на JS. Помогите реализовать! Aggao Элементы интерфейса 3 27.11.2014 23:32
Автоматическая смена нескольких картинок utb jQuery 4 24.01.2012 12:47
Валидный скрипт смена картинок boss Javascript под браузер 2 17.08.2011 20:21
Смена картинок в зависимости от положения курсора мыши antonio_vrn Events/DOM/Window 3 31.05.2011 22:07