Есть 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. хочу заметить что при изменении ширины должна изменяться также высота строго пропорционально изменениям ширины (просто мало ли если кто не учтет).
Еще раз заранее спасибо! Жду Вашей помощи!
