当前位置： 文江博客话题详情

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

发布于 2024-11-29 10:10:27 字数 6559 浏览 0 评论 0原文

我的博客网站上有一个 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>

*第一个滑块的 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>

请帮我解决我的问题

原文

I have one jQuery slider on my blogger site : swamy39.blogspot.com

When I add another slider using HTML/Javascript widget what I see is when 1st slider works then the 2nd is stopped and when 2nd is running 1st is stopped. They run one by one.

I want both sliders to run at a time. Any coders can help me ???
Please help.

The below code I included before section.

<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() {
$('#s3slider').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>

*The html code for 1st slider as follows :*

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

The HTML code for second slider as follows :

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

Please help me to solve my problem

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

单调的奢华 2024-12-06 10:10:27

每个滑块都需要有自己唯一的名称。例如“滑块 1”和“滑块 2”。我还重命名了您的清除 div 并将其移动到 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：

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

Each slider needs to have an it's own unique name. For example "slider1" and "slider2". I also renamed and moved your clearing div to within the ul. Not sure if this is typ. conventions but its working for me.

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>

You're css should reflect these names too.

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

#slider1Content {
/* styles */
}

.slider1Image {
/* styles */
}

.slider1Image span {
/* styles */
}

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

Then each slider needs its own 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
});
回复 原文
墟烟 2024-12-06 10:10:27

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

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

       timeOut: 4000;
    });

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

    });

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

since the div id is unique , it should be prefixed with the "$" in front of the id like the following. All of these should be within the doc.ready function.

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

       timeOut: 4000;
    });

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

    });

    $('#slider3').s3slider ( {
      timeOut: 4500;
    });
});
回复 原文
~没有更多了~

关于作者

半葬歌

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

missyouangeled

文章 0 评论 0

三生一梦

文章 0 评论 0

压抑⊿情绪

文章 0 评论 0

天涯离梦残月幽梦

文章 0 评论 0

指尖微凉心微凉

文章 0 评论 0

☆獨立☆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文