Javascript.RU

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

Как сделать растягивающийся слайд вместо фиксированного?
Есть js:
(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);


Также дополнительно js:

<script language="javascript" type="text/javascript">
            $(function() {
                $("#number_slideshow").number_slideshow({
                    slideshow_autoplay: 'enable',//enable disable
                    slideshow_time_interval: '5000',
                    slideshow_window_background_color: "#ccc",
                    slideshow_window_padding: '0',
                    slideshow_window_width: '900',
                    slideshow_window_height: '234',
                    slideshow_border_size: '1',
                    slideshow_border_color: '#3d6884',
                    slideshow_show_button: 'enable',//enable disable
                    slideshow_show_title: 'disable',//enable disable
                    slideshow_button_text_color: '#fff',
                    slideshow_button_background_color: '#527284',
                    slideshow_button_current_background_color: '#375b70',
                    slideshow_button_border_color: '#000',
                    slideshow_loading_gif: 'http://sportklick.ru/images/loading.gif',//loading pic position, you can replace it.
                    slideshow_button_border_size: '0'
                });
            });
        </script>


Есть css:

.number_slideshow{
// line-height: 20px;
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
position: relative;
display: none;
}
.number_slideshow .number_slideshow_nav{
filter: alpha(opacity=70);
opacity: 0.7;
padding: 0px;
margin: 0px;
position: absolute;
bottom: 5px;
right: 5px;
}
.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: 5px;
padding-right: 5px;
}
.number_slideshow ul{
margin: 0px;
background-position:center center;
background-repeat: no-repeat;
}
.number_slideshow ul li{
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-khtml-border-radius: 3px;
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;
}







Также сам слайд:

<div id="number_slideshow" class="number_slideshow">
			<ul>
			<li><a href="#"><img src="slide0001.png" alt="Описание картинки 1"/></a></li>
			<li><a href="#"><img src="slide0001.png" alt="Описание картинки 1"/></a></li>
			<li><a href="#"><img src="slide0001.png" alt="Описание картинки 1"/></a></li>
			<li><a href="#"><img src="slide0001.png" alt="Описание картинки 1"/></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>





Как сделать вместо слайда с фиксированной шириной(как описано выше) слайд растягивающийся(что на что изменить и поправить)??? Помогите разобраться! Заранее спасибо!

p.s. хочу заметить что при изменении ширины должна изменяться также высота строго пропорционально изменениям ширины (просто мало ли если кто не учтет).

Еще раз заранее спасибо! Жду Вашей помощи!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 21:32
Как сделать слайд шоу mdiimas jQuery 6 27.08.2010 20:40
Как сделать AJAX-авторизацию на страничке? emerge AJAX и COMET 1 08.03.2010 10:00
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06
Как сделать вкладку с 'плюсами и минусами'??? Monopolist Элементы интерфейса 2 05.08.2009 14:07