如何在blogger上实现多个Jquery滑块_Jquery_Slider

如何在blogger上实现多个Jquery滑块

jquery

如何在blogger上实现多个Jquery滑块,jquery,slider,Jquery,Slider,我的博客网站上有一个jQuery滑块：swamy39.blogspot.com 当我使用HTML/Javascript小部件添加另一个滑块时，我看到第一个滑块工作时，第二个滑块停止，第二个滑块运行时，第一个滑块停止。他们一个接一个地跑我希望两个滑块同时运行。有程序员能帮我吗？？？请帮忙我在第节之前包含的以下代码。 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='te

我的博客网站上有一个jQuery滑块：swamy39.blogspot.com

当我使用HTML/Javascript小部件添加另一个滑块时，我看到第一个滑块工作时，第二个滑块停止，第二个滑块运行时，第一个滑块停止。他们一个接一个地跑

我希望两个滑块同时运行。有程序员能帮我吗？？？请帮忙

我在第节之前包含的以下代码。

<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>

<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>

<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>


// http://www.serie3.info/
CSS帮助：Mészáros Róbert->http://www.perspectived.com/
版本：1.0
http://24works.blogspot.com/2010/12/11-featured-content-slider-for-blogger.html
版权所有：如有必要，可以随意重新发布/修改脚本
只要你把我的信息放在最上面。
-------------------------------------------------------------------------- */
（函数（$）{
$.fn.s3Slider=函数（变量）{
var元素=这个；
变量超时=（vars.timeOut！=未定义）？vars.timeOut:4000；
无功电流=零；
var timeOutFn=null；
var faderStat=真；
var=false；
var items=$（“#”+元素[0].id+“内容”.+元素[0].id+“图像”）；
var itemsSpan=$（“#”+元素[0].id+“内容”.+元素[0].id+“图像跨度”）；
项目。每个（功能（i）{
$（items[i]）.mouseover（function（）{
mOver=true；
});
$（项目[i]）.mouseout（函数（）{
mOver=false；
fadeElement（真）；
});
});
var fadeElement=函数（isMouseOut）{
var thisTimeOut=（isMouseOut）？（timeOut/2）：超时；
thisTimeOut=（faderStat）？10:thisTimeOut；
如果（items.length>0）{
timeOutFn=setTimeout（makeSlider，thisTimeOut）；
}否则{
控制台日志（“Poof…”）；
}
}
var makeSlider=函数（）{
当前=（当前！=null）？当前：项[（项.长度-1）]；
var currNo=jQuery.inArray（当前，项目）+1
currNo=（currNo==items.length）？0：（currNo-1）；
var newMargin=$（元素）.width（）*currNo；
if（faderStat==true）{
如果（！移动器）{
$（items[currNo]）.fadeIn（（timeOut/6），function（）{
if（$（itemsSpan[currNo]）.css（'bottom'）==0）{
$（itemsSpan[currNo]）.slideUp（（超时/6），函数（）{
faderStat=false；
当前=项目[当前编号]；
如果（！移动器）{
fadeElement（假）；
}
});
}否则{
$（itemsSpan[currNo]）。向下滑动（（超时/6），函数（）{
faderStat=false；
当前=项目[当前编号]；
如果（！移动器）{
fadeElement（假）；
}
});
}
});
}
}否则{
如果（！移动器）{
if（$（itemsSpan[currNo]）.css（'bottom'）==0）{
$（itemsSpan[currNo]）。向下滑动（（超时/6），函数（）{
$（项目[currNo]）。淡出（（超时/6），函数（）{
faderStat=true；
当前=项目[（当前编号+1）]；
如果（！移动器）{
fadeElement（假）；
}
});
});
}否则{
$（itemsSpan[currNo]）.slideUp（（超时/6），函数（）{
$（项目[currNo]）。淡出（（超时/6），函数（）{
faderStat=true；
当前=项目[（当前编号+1）]；
如果（！移动器）{
fadeElement（假）；
}
});
});
}
}
}
}
makeSlider（）；
};
})（jQuery）；
//]]>
$（文档）.ready（函数（）{
$（'；#s3slider'；）.s3slider({
超时：4000
});
});
#S3滑块{
背景：#000000；
边框：1px实心#818e8f；
宽度：550px；
高度：200px；
位置：相对位置；
溢出：隐藏；
}
#S3幻灯片内容{
宽度：550px；
位置：绝对位置；
顶部：-14px；
填充：0px；
左边距：0；
}
.S3幻灯片图像{
浮动：左；
位置：相对位置；
显示：无；
}
.S3幻灯片图像范围{
位置：绝对位置；
左：0；
字体：20px投石机MS，无衬线；
填充：10px 0px；
宽度：550px；
背景色：#000；
过滤器：α（不透明度=80）；
-moz不透明度：0.8；
-khtml不透明度：0.8；
不透明度：0.8；
颜色：#fff；
显示：无；
底部：0；
文本对齐：居中；
}
.清楚{
明确：两者皆有；
}

*第一个滑块的html代码如下：

<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>

<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>

<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代码如下：

<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>

<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>

<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>

请帮助我解决我的问题

每个滑块都需要有自己的唯一名称。例如“slider1”和“slider2”。我还将您的清算部门重命名并移动到ul内部。不确定这是否是典型的。但是这对我有用

<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>

<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>

<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>

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>

div id=“slider1”

您的css也应该反映这些名称

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

#slider1Content {
/* styles */
}

.slider1Image {
/* styles */
}

.slider1Image span {
/* styles */
}

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


#滑块1{
/*风格*/
}
#滑块1内容{
/*风格*/
}
.Slider1图像{
/*风格*/
}
.滑块1图像范围{
/*风格*/
}
.清楚{
明确：两者皆有；
}

然后，每个滑块都需要自己的Java：

<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
});


$（文档）.ready（函数（）{
$（slider1；）.s3Slider({
超时：4000
});
$（文档）.ready（函数（）{
$（slider2；）.s3Slider({
超时：6000
});

由于div id是唯一的，因此应该在id前面加上前缀“$”，如下所示。所有这些都应该在doc.ready函数中

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

       timeOut: 4000;
    });

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

    });

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