Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.12.2022, 08:25
Новичок на форуме
Отправить личное сообщение для Vlvshein Посмотреть профиль Найти все сообщения от Vlvshein
 
Регистрация: 07.12.2022
Сообщений: 1

Слайдер изображений на сайте (задержка первого кадра)
Здравствуйте. Хочу сделать на сайте небольшой слайдер. Нашел в сети Числовое слайдшоу на основе jQuery плагина - number slideshow. Проверил, все работает, меня устраивает. Но если я в первый слайд вставляю видео, то вначале я вижу пустое окно слайдера и только спустя какое то время появляется это видео. На этом слайдере есть кнопки управления, если навести мышь на любую из кнопок (1-4), то показывается слайд под этим номером. В самом начале когда я вижу серый фон, если я наведу мышь на первую кнопку управления, видео сразу показывается. Я не программист, поэтому прошу не судить за такое описание, но очень прошу помощи подсказать что мне нужно изменить, чтобы при открытии страницы видео сразу же показывалось на 1 слайде без задержки. Заранее спасибо.
Код плагина:
(function(a){
    a.fn.number_slideshow=function(p){
        var p=p||{};
        var n=p&&p.slideshow_autoplay?p.slideshow_autoplay:"enable";
        var o=p&&p.slideshow_time_interval?p.slideshow_time_interval:"5000";
        var q=p&&p.slideshow_window_background_color?p.slideshow_window_background_color:"white";
        var r=p&&p.slideshow_window_padding?p.slideshow_window_padding:"5";
        var s=p&&p.slideshow_window_width?p.slideshow_window_width:"400";
        var t=p&&p.slideshow_window_height?p.slideshow_window_height:"400";
        var u=p&&p.slideshow_border_size?p.slideshow_border_size:"1";
        var v=p&&p.slideshow_border_color?p.slideshow_border_color:"black";
        var w=p&&p.slideshow_show_button?p.slideshow_show_button:"enable";
        var H=p&&p.slideshow_show_title?p.slideshow_show_title:"enable";
        var x=p&&p.slideshow_button_text_color?p.slideshow_button_text_color:"red";
        var z=p&&p.slideshow_button_background_color?p.slideshow_button_background_color:"black";
        var A=p&&p.slideshow_button_current_background_color?p.slideshow_button_current_background_color:"white";
        var B=p&&p.slideshow_button_border_color?p.slideshow_button_border_color:"blue";
        var C=p&&p.slideshow_button_border_size?p.slideshow_button_border_size:"2";
        var s_l_g=p&&p.slideshow_loading_gif?p.slideshow_loading_gif:"loading.gif";
        var first = false;
        r += "px";
        s += "px";
        t += "px";
        u += "px";
        C += "px";
        var D;
        var E=0;
        var F=a(this);
        var G=F.find("ul:first").children("li").length;
        if(F.find("ul").length==0||F.find("li").length==0){
            a.append("Require content");
            return null
        }
        F.show();
      F.find("ul:first").children("li").children("a").children("img").css("width",s).css("height",t);
        F.find("ul:first").css("background-image","url("+s_l_g+")").css("background-position","center center");
        s_s_ul(F.find("ul:first"),r,s,t,u,v,q,z,x,s_l_g);
        s_s_n(F.find(".number_slideshow_nav"),x,w,z,A,B,C);
        F.find("ul:first").children("li").hide();
        var img = new Image();
        img.src = F.find("ul:first").children("li").eq(0).children("a").children("img").attr("src");
        img.onload = function(){
            if(first == false){
                first = true;
                play();
            }
        };
        if(img.complete){
            if(first == false){
                first = true;
                play();
            }
        }
        F.find("ul:first").hover(function(){
            clearTimeout(D);
        },function(){
            D=setTimeout(play,o);
        });
        F.find(".number_slideshow_nav").children("li").hover(
            function(){
                stop($(this));
            },
            function(){
            }
        );
        function play(){
            if(n=="enable"){
                clearTimeout(D);
                if(E >= G){
                    E = 0;
                }
                F.find("ul:first").children("li").fadeOut();
                F.find("ul:first").children("li").eq(E).fadeIn();
                F.find(".number_slideshow_nav").children("li").css("background-color",z);
                F.find(".number_slideshow_nav").children("li").eq(E).css("background-color",A);
                E++;
                if(E>=G){
                    E=0
                }
                D=setTimeout(play,o)
            }else{
                F.find("ul:first").children("li").eq(E).fadeIn();
            }
        }
        function stop(a){
            clearTimeout(D);
            var b=a.parent().children().index(a);
            if(b != (E-1)){
                E=b+1;
                /*
                if(E>=G){
                    E=0
                }
                */
                F.find("ul:first").children("li").fadeOut();
                F.find("ul:first").children("li").eq(b).fadeIn();
                F.find(".number_slideshow_nav").children("li").css("background-color",z);
                F.find(".number_slideshow_nav").children("li").eq(b).css("background-color",A)
            }
        }
        function s_s_ul(a,b,c,d,e,f,g,h,i,l_g){
            a.children("li").css("width",c).css("height",d);
            if(H == 'enable'){
                a.children("li").each(function(i){
                     a.children("li").eq(i).append("<p>"+a.children("li").eq(i).children("a").children("img").attr("alt")+"</p>");
                });
            }
            a.children("li").children("p").css("background-color",h).css("color",i).css('width',parseInt(c)-10);
            b=parseInt(b);
            c=parseInt(c);
            d=parseInt(d);
            e=parseInt(e);
            var h=c+e*2+b*2;
            var i=d+e*2+b*2;
            F.css("width",h);
            F.css("height",i);
            var j=d+"px";
            var k=c+"px";
            var l="border: "+f+" solid "+" "+e+"px; height:"+j+"; width:"+k+"; padding:"+b+"px; background-color:"+g+"; background-image:url("+l_g+");";
            a.attr("style",l)
        }
        function s_s_n(b,c,d,e,f,g,h){
            h=parseInt(h);
            var j=b.children("li");
            var a=j.children("a");
            a.css("color",c);
            var k="border: "+g+" solid "+" "+h+"px; background-color:"+e+";";
            j.attr("style",k);
            if(d!="enable"){
                b.hide()
            }
        }
    }
})(jQuery);

Вот так выводится слайдер на странице:
<script type="text/javascript" src="js/number_slideshow.js"></script>
 
<script language="javascript" type="text/javascript">
             $(function() {
        $("#number_slideshow").number_slideshow({
            slideshow_autoplay: 'enable',//enable disable
            slideshow_time_interval: '3000',
            slideshow_window_background_color: "",
            slideshow_window_padding: '1',
            slideshow_window_width: '1500',
            slideshow_window_height: '500',
            slideshow_border_size: '1',
            slideshow_border_color: 'black',
            slideshow_show_button: 'enable',//enable disable
            slideshow_show_title: 'disable',//enable disable
            slideshow_button_text_color: '#CCC',
            slideshow_button_background_color: '#333',
            slideshow_button_current_background_color: '#666',
            slideshow_button_border_color: '#000',
            slideshow_loading_gif: 'loading.gif',//картинка загрузки, её можно сменить.
            slideshow_button_border_size: '1'
        });
    });
        </script>
 <div id="number_slideshow" class="number_slideshow">
    <ul>
                      <li><video autoplay muted loop><source src="/images/main_slider/video2_out.webm" type="video/webm"/></video></li>
                <li><a href="#"><img src="/images/main_slider/202.jpg" ></a></li>
                <li><a href="#"><img src="/images/main_slider/203.jpg" /></a></li>
        <li><a href="#"><img src="/images/main_slider/204.jpg" /></a></li>
            </ul>
    <ul class="number_slideshow_nav">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
    <div style="clear: both"></div>
</div>


И есть еще стили:
.number_slideshow{
    line-height: 20px;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px;
    margin: 0px;
    position: relative;
    display: none;
    margin-left: auto;
    margin-right: auto;
}
.number_slideshow .number_slideshow_nav{
    filter: alpha(opacity=60);
    opacity: 0.6;
    padding: 0px;
    margin: 0px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.number_slideshow .number_slideshow_nav li{
    box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -o-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -khtml-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    margin-left: 6px;
    position: relative;
    float: left;
}
.number_slideshow .number_slideshow_nav li a{
    padding-left: 8px;
    padding-right: 8px;
}
.number_slideshow ul{
    margin: 0px;
    background-position:center center;
    background-repeat: no-repeat;
}
.number_slideshow ul li{
     border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    padding: 0px;
    margin: 0px;
    list-style: none;
    position: absolute;
}
.number_slideshow ul li p{
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-left: 5px;
    padding-right: 5px;
    filter: alpha(opacity=60);
    opacity: 0.6;
    font-size: 13px;
    line-height: 23px;
}
.number_slideshow ul li a{
    text-decoration: none;
}
.number_slideshow ul li a img{
    border: none;
}
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как анимировать слайдер на сайте посредством AddClass или ToggleClass? NeXan jQuery 2 24.06.2017 19:47
Замена изображений на сайте на свои privet2016 Общие вопросы Javascript 0 03.06.2016 11:28
Слайдер для изображений virgoprima Элементы интерфейса 7 10.05.2016 21:27
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
не хочет работать слайдер картинок на сайте MadStill Общие вопросы Javascript 0 29.03.2011 14:55