2011-08-12 83 views
0

多個jQuery的滑塊我有一個jQuery的滑塊在我的博客網站:swamy39.blogspot.com如何實現對博客

當我添加使用HTML/JavaScript的小部件我所看到的是,當第一個滑塊的作品那麼另一個滑塊第2停止,第2次運轉時第1停止。他們一個接一個地跑。

我希望同時運行兩個滑塊。任何編碼員都可以幫助我? 請幫忙。

下面的代碼我包含在部分之前。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

<script type='text/javascript'> 
//<![CDATA[ 

/* ------------------------------------------------------------------------ 
s3Slider 

Developped By: Boban Karišik -> http://www.serie3.info/ 
CSS Help: Mészáros Róbert -> http://www.perspectived.com/ 
Version: 1.0 
http://24works.blogspot.com/2010/12/11-featured-content-slider-for-blogger.html 
Copyright: Feel free to redistribute the script/modify it, as 
long as you leave my infos at the top. 
-------------------------------------------------------------------------- */ 


(function($){ 

$.fn.s3Slider = function(vars) { 

var element = this; 
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; 
var current = null; 
var timeOutFn = null; 
var faderStat = true; 
var mOver = false; 
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); 
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); 

items.each(function(i) { 

$(items[i]).mouseover(function() { 
mOver = true; 
}); 

$(items[i]).mouseout(function() { 
mOver = false; 
fadeElement(true); 
}); 

}); 

var fadeElement = function(isMouseOut) { 
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; 
thisTimeOut = (faderStat) ? 10 : thisTimeOut; 
if(items.length > 0) { 
timeOutFn = setTimeout(makeSlider, thisTimeOut); 
} else { 
console.log("Poof.."); 
} 
} 

var makeSlider = function() { 
current = (current != null) ? current : items[(items.length-1)]; 
var currNo = jQuery.inArray(current, items) + 1 
currNo = (currNo == items.length) ? 0 : (currNo - 1); 
var newMargin = $(element).width() * currNo; 
if(faderStat == true) { 
if(!mOver) { 
$(items[currNo]).fadeIn((timeOut/6), function() { 
if($(itemsSpan[currNo]).css('bottom') == 0) { 
$(itemsSpan[currNo]).slideUp((timeOut/6), function() { 
faderStat = false; 
current = items[currNo]; 
if(!mOver) { 
fadeElement(false); 
} 
}); 
} else { 
$(itemsSpan[currNo]).slideDown((timeOut/6), function() { 
faderStat = false; 
current = items[currNo]; 
if(!mOver) { 
fadeElement(false); 
} 
}); 
} 
}); 
} 
} else { 
if(!mOver) { 
if($(itemsSpan[currNo]).css('bottom') == 0) { 
$(itemsSpan[currNo]).slideDown((timeOut/6), function() { 
$(items[currNo]).fadeOut((timeOut/6), function() { 
faderStat = true; 
current = items[(currNo+1)]; 
if(!mOver) { 
fadeElement(false); 
} 
}); 
}); 
} else { 
$(itemsSpan[currNo]).slideUp((timeOut/6), function() { 
$(items[currNo]).fadeOut((timeOut/6), function() { 
faderStat = true; 
current = items[(currNo+1)]; 
if(!mOver) { 
fadeElement(false); 
} 
}); 
}); 
} 
} 
} 
} 

makeSlider(); 

}; 

})(jQuery); 

//]]> 
</script> 

<script type='text/javascript'> 
$(document).ready(function() { 
$(&#39;#s3slider&#39;).s3Slider({ 
timeOut: 4000 
}); 
}); 
</script> 

<style type='text/css'> 
#s3slider { 
background:#000000; 
border:1px solid #818e8f; 
width: 550px; 
height: 200px; 
position: relative; 
overflow: hidden; 
} 
#s3sliderContent { 
width: 550px; 
position: absolute; 
top:-14px; 
padding: 0px; 
margin-left: 0; 
} 
.s3sliderImage { 
float: left; 
position: relative; 
display: none; 
} 
.s3sliderImage span { 
position: absolute; 
left: 0; 
font: 20px Trebuchet MS, sans-serif; 
padding: 10px 0px; 
width: 550px; 
background-color: #000; 
filter: alpha(opacity=80); 
-moz-opacity: 0.8; 
-khtml-opacity: 0.8; 
opacity: 0.8; 
color: #fff; 
display: none; 
bottom: 0; 
text-align:center; 
} 
.clear { 
clear: both; 
} 
</style> 

* 的第一個滑塊的HTML代碼如下: *

<div id="s3slider"> 
<ul id="s3sliderContent"> 

<li class="s3sliderImage"> 
<a href="http://www.hindujagruti.org/denigrations/sitasingstheblues"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/chicago-ds-histe-homepage.jpg" /> 
<span></span></a> 
</li> 

<li class="s3sliderImage"> 
<a href="http://www.hindujagruti.org/activities/campaigns/national/respect-flag/"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/madam_cama.jpg" /> 
<span></span></a> 
</li> 

<li class="s3sliderImage"> 
<a href="http://www.hindujagruti.org/hinduism/knowledge/article/raksha-bandhan-and-nariyal-pournima.html"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/narali-purnima(1).jpg" /> 
<span></span></a> 
</li> 

<li class="s3sliderImage"> 
<a href="http://www.hindujagruti.org/articles/43.html"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/krushnajanmasthami_2010.jpg" /> 
<span></span></a> 
</li> 

</ul> 
</div> 

<div class='clear'></div> 

爲第二滑塊的HTML代碼如下:

<div id="s3slider"> 
<ul id="s3sliderContent"> 

<li class="s3sliderImage"> 
<a href="http://www.hindujagruti.org/denigrations/sitasingstheblues"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/chicago-ds-histe-homepage.jpg" /> 
<span></span></a> 
</li> 

<li class="s3sliderImage"> 
<a href="http://www.hindujagruti.org/activities/campaigns/national/respect-flag/"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/madam_cama.jpg" /> 
<span></span></a> 
</li> 

<li class="s3sliderImage"> 
<a href="http://www.hindujagruti.org/hinduism/knowledge/article/raksha-bandhan-and-nariyal-pournima.html"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/narali-purnima(1).jpg" /> 
<span></span></a> 
</li> 

<li class="s3sliderImage"> 
<a href="http://www.hindujagruti.org/articles/43.html"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/krushnajanmasthami_2010.jpg" /> 
<span></span></a> 
</li> 

</ul> 
</div> 

<div class='clear'></div> 

請幫助我解決我的問題oblem

回答

2

每個滑塊需要有一個自己的唯一名稱。例如「slider1」和「slider2」。我也重新命名並將您的清算股轉移到ul內。不知道這是否是典型的。公約,但它爲我工作。

div id="slider1" 
<ul id="slider1Content"> 

<li class="slider1Image"> 
<a href="http://www.hindujagruti.org/denigrations/sitasingstheblues"><img  style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/chicago-ds-histe-homepage.jpg" /> 
<span></span></a> 
</li> 

<li class="slider1Image"> 
<a href="http://www.hindujagruti.org/activities/campaigns/national/respect-flag/"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/madam_cama.jpg" /> 
<span></span></a> 
</li> 

<li class="slider1Image"> 
<a href="http://www.hindujagruti.org/hinduism/knowledge/article/raksha-bandhan-and-nariyal-pournima.html"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/narali-purnima(1).jpg" /> 
<span></span></a> 
</li> 

<li class="slider1Image"> 
<a href="http://www.hindujagruti.org/articles/43.html"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/krushnajanmasthami_2010.jpg" /> 
<span></span></a> 
</li> 
<div class='clear slider1Image'></div> 

</ul> 
</div> 


<div id="slider2"> 
<ul id="slider2Content"> 

<li class="slider2Image"> 
<a href="http://www.hindujagruti.org/denigrations/sitasingstheblues"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/chicago-ds-histe-homepage.jpg" /> 
<span></span></a> 
</li> 

<li class="slider2Image"> 
<a href="http://www.hindujagruti.org/activities/campaigns/national/respect-flag/"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/madam_cama.jpg" /> 
<span></span></a> 
</li> 

<li class="slider2Image"> 
<a href="http://www.hindujagruti.org/hinduism/knowledge/article/raksha-bandhan-and-nariyal-pournima.html"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/narali-purnima(1).jpg" /> 
<span></span></a> 
</li> 

<li class="slider2Image"> 
<a href="http://www.hindujagruti.org/articles/43.html"><img style="width:245px;height:200px;" src="http://hindujagruti.org/profiles/admin/modules/hp_links/pics/krushnajanmasthami_2010.jpg" /> 
<span></span></a> 
</li> 

<div class='clear slider2Image'></div> 
</ul> 
</div> 

你的CSS應該反映這些名字太。

<style type='text/css'> 
#slider1 { 
/* styles */ 
} 

#slider1Content { 
/* styles */ 
} 

.slider1Image { 
/* styles */ 
} 

.slider1Image span { 
/* styles */ 
} 

.clear { 
clear: both; 
} 
</style> 

然後每個滑塊需要它自己的Java:在類似下面的ID前面

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" /></script> 
<script src="Scripts/s3Slider.js" type="text/javascript" /></script> 

<script type="text/javascript" /> 

$(document).ready(function() { 
$(slider1;).s3Slider({ 
timeOut: 4000 
}); 

$(document).ready(function() { 
$(slider2;).s3Slider({ 
timeOut: 6000 
}); 
0

因爲DIV ID是唯一的,應該用「$」前綴。所有這些都應該在doc.ready函數中。

$(document).ready (function() { 
    $('#slider1').s3slider ({ 

     timeOut: 4000; 
    }); 

    $('#slider2').s3slider ({ 
     timeOut : 5000; 

    }); 

    $('#slider3').s3slider ({ 
     timeOut: 4500; 
    }); 
});