How to implement multiple Jquery sliders on blogger

2023-03-28 05:00 问答作者：

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() {
$(&#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>

*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>
&l开发者_Python百科t;/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

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

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

继续阅读：jquery

How to implement multiple Jquery sliders on blogger

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？