我遇到了问题。 我有一个带缩略图的滑块。我想把这个滑块放在同一页面的3个不同部分。当我只放置1个滑块时。它运作良好。完善。当我复制并粘贴到同一页面上的另一个位置时。然后没有滑块工作..
我的代码有点大。
CSS就在这里
#imageSliderWrapper, #imageSliderWrapper div {
box-sizing:content-box;
}
#imageSliderWrapper {margin-left:60px;padding:40px;width:500px;height:440px;background:url(outerFrame.gif);position:relative;
margin:0 auto;/*aligned to center */
}
#imageSliderLargeImage
{
width:500px;height:300px;border:1px solid #E9E9E9;margin-bottom:16px;position:relative;overflow:hidden;
background-color: Black;/*black background usually gives a better visual effect during image transition.*/
}
#imageSliderLargeImage img {position:absolute; top:0; left:0;}
#imageSliderLargeImage .description
{
position:absolute; left:0;
z-index:4;
width:440px;
_width:500px;/*IE 6 hack*/
padding:10px 30px;
color:White;
background-color: rgba(0, 0, 0, 0.3);
/*background-color: transparent\9; IE6, IE7, IE8 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000); /*IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000)"; /*IE 8*/
/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; IE 8*/
}
#imageSlider
{
width:502px; height:128px;
padding:0;/*Note: never change this value other than 0 */
background-color:#EEE;
overflow:hidden;
position:relative;
text-align:center;
}
/*--------div.item is each slides. It is the child div nodes of #imageSlider, and the wrapper of each slide image--------*/
#imageSlider .item
{
border:1px solid #DDD;
background-color:#FFF;
width:100px;
padding:5px;
margin:6px;
color:Black;
line-height:30px;
}
#imageSlider img
{
width:100px; height:100px;
}
#imageSlider .description
{
display:none;
}
/*-----------navigation buttons----------------*/
.navPrev, .navPlay, .navPause, .navNext
{
width:18px; height:25px; position:absolute; top:410px;
background:transparent url(navbuttons.gif);
display:inline-block; z-index:5; cursor:pointer;
}
.navPause,.navPlay {display:none;} .navPrev {background-position:0 -75px;left:16px;} .navNext {background-position:0 -50px;left:545px;}
.navPrev, .navPlay, .navPause, .navNext
{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
/*-------------navigation bullets------------*/
/* Note: When "ScrollAllInView" was set to true in the Javascript, the navBullets won't be displayed.*/
.navBullets
{
display:none;
}
.navBullets div.focus {background-position:0 -10px;}
Jquery在这里
var sliderOptions=
{
SliderId:"imageSlider",
AnimationType:"Horizontal",
ScrollInterval:99999999,
ScrollDuration:300,
AutoScroll:false,
ScrollAllInView:false,
Circular:true,
License:"b2e98"
};
var largeImageOptions = { largeImageContainerId: "imageSliderLargeImage", AutoDisplay: true, DisplayDescription: true, DescriptionAnimation: true };
var imageSlider=new slider(sliderOptions);
/* Menucool Legacy Thumbnail Slider v2014.9.16. Copyright www.menucool.com */
function slider(s){var r=function(a,b){if(a.className=="")a.className=b;else a.className+=" "+b},g=function(d){var a=d.childNodes,c=[];if(a)for(var b=0,e=a.length;b<e;b++)a[b].nodeType==1&&c.push(a[b]);return c},n=function(b){var a=/d/gi;return a.test(b.className)},h=function(a,b){if(a){a.o=b;a.style.opacity=b;a.style.MozOpacity=b;a.style.filter="alpha(opacity="+b*100+")"}},q=function(a){if(window.addEventListener)window.addEventListener("load",a,false);else window.attachEvent&&window.attachEvent("onload",a)},v=["$1$2$3","$1$2$3","$1$24","$1$23","$1$22"],d,a,c=[],f,e,b,j,k=null,i=null,u=[/(?:.*\.)?(\w)([\w\-])[^.]*(\w)\.[^.]+$/,/.*([\w\-])\.(\w)(\w)\.[^.]+$/,/^(?:.*\.)?(\w)(\w)\.[^.]+$/,/.*([\w\-])([\w\-])\.com\.[^.]+$/,/^(\w)[^.]*(\w)$/],m=function(){this.a=this.b=this.c=this.d=this.e=this.f=null;this.g()};m.prototype={g:function(){if(typeof largeImageOptions!=="undefined"&&(this.a=document.getElementById(largeImageOptions.largeImageContainerId))){this.d=document.createElement("img");this.d.style.visibility="hidden";this.d.o=0;this.a.insertBefore(this.d,this.a.firstChild);this.e=document.createElement("img");this.e.style.visibility="hidden";this.e.o=0;this.a.insertBefore(this.e,this.a.firstChild);if(largeImageOptions.DisplayDescription){this.f=document.createElement("div");this.f.className="description";this.a.appendChild(this.f)}}},h:function(b,a){if(this.d.o==0){this.d.style.visibility="visible";this.d.src=a;this.k(b,this.d,this.e)}else{this.e.style.visibility="visible";this.e.src=a;this.e.o=0;this.k(b,this.e,this.d)}if(this.f){var c=this;clearTimeout(c.c);if(largeImageOptions.DescriptionAnimation)this.f.style.visibility="hidden"}},k:function(c,b,a){h(b,b.o+.05);h(a,a.o-.05);arrived=a.o<=0&&b.o>=1;if(arrived){b.o=1;a.o=0;a.style.visibility="hidden";this.l(c)}else{var d=this;this.b=setTimeout(function(){d.k(c,b,a)},15)}},l:function(d){if(this.f){for(var b=g(d.parentNode),c="",a=0;a<b.length;a++)if(b[a].className=="description"){c=b[a].innerHTML;break}this.f.innerHTML=c;if(largeImageOptions.DescriptionAnimation){this.f.style.visibility="visible";this.f.style.top=this.a.offsetHeight+"px";this.m(this.f.offsetHeight)}else this.f.style.top=this.a.offsetHeight-this.f.offsetHeight+"px"}},m:function(a){var d=this.a.offsetHeight,c=this.f.offsetTop;if(c+a<=d)this.f.style.top=d-a+"px";else{var b=Math.ceil((c+a-d)/4);if(b<2)b=2;this.f.style.top=c-b+"px";var e=this;this.c=setTimeout(function(){e.m(a)},15)}}};var l=function(a){e=a;c=[];this.t=null;this.a=0;this.b=1;this.c;this.i=0;this.d=null;this.e()},o=function(b){switch(b.AnimationType.toLowerCase()){case"vertical":d=1;break;case"fade":d=2;break;default:d=0}a=[];a[0]=b.ScrollInterval;a[1]=b.ScrollDuration;a[2]=b.AutoScroll;a[3]=b.SliderId;a[4]=b.ScrollAllInView;a[5]=b.Circular;a[6]=b.License;a[0]<=a[1]&&alert("Warning: ScrollInterval should be greater than ScrollDuration.")};l.prototype={e:function(){this.u(e);for(var l=g(e),h=0,m=l.length;h<m;h++)!n(l[h])&&c.push(l[h]);f=c.length;var j=0;if(d<2){b=document.createElement("div");b.style.overflow="hidden"}for(var h=0,m=f;h<m;h++){r(c[h],"item");c[h].i=h;switch(d){case 0:c[h].style.cssFloat="left";c[h].style.styleFloat="left";c[h].style.position="relative";j+=c[h].offsetWidth;b.appendChild(c[h]);break;case 1:c[h].style.position="relative";j+=c[h].offsetHeight;b.appendChild(c[h]);break;default:c[h].style.visibility="hidden";c[h].style.position="absolute";c[h].style.left=c[h].style.top="0px";c[h].o=1}}if(d<2){e.appendChild(b);b.style.position="relative";if(d==1)b.style.height=j*2+"px";else{b.style.whiteSpace="nowrap";b.style.width=j*2+"px"}}(new Function("aA","bB","cC","dD",function(c){for(var b=[],a=0,d=c.length;a<d;a++)b[b.length]=String.fromCharCode(c.charCodeAt(a)-4);return b.join("")}("zev$NAjyrgxmsr,|0}-zev$eAjyrgxmsr,f-zev$gAf2glevGshiEx,4-2xsWxvmrk,-?vixyvr$g2wyfwxv,g2pirkxl15-?\u0081?vixyvr$|/}_5a/e,}_4a-/e,}_6a-?\u0081?xlmw2g$A$xlmw2z,-?zev$qAeE_:a\u0080\u0080+5:+0rAtevwiMrx,q2glevEx,5--0sA,hsgyqirx2hsqemr\u0080\u0080+p5x+-2vitpegi,gG_r16a0hH_r16a-2wtpmx,++-?mj,q%AN,+f+/r0s--zev$hAQexl2verhsq,-0$kA40$lA+tevirxRshi+?mj,h@26-kAfF?ipwi$mj,h@27-kAfF2ri|xWmfpmrk?ipwi$mj,h@28**fF_la2rshiReqi%A+FSH]+-kAfF_la?mj,k-k_la2mrwivxFijsvi,hsgyqirx2gviexiXi|xRshi,+Pikeg}$Wpmhiv$Egxmzexmsr$viqmrhiv+-0k-?\u0081"))).apply(this,[a,e.parentNode,u,v]);this.f();this.w(1,1);if(i.a){this.u(i.a);for(var h=0;h<c.length;h++){var k=c[h].getElementsByTagName("img");if(k.length&&k[0].getAttribute("largeImage")){k[0].onclick=function(){i.h(this,this.getAttribute("largeImage"))};k[0].style.cursor="pointer"}}this.q(0)}},f:function(){var b=this;if(!a[4]){this.d=document.createElement("div");this.d.className="navBullets";for(var l="",c=0;c<f;c++)l+="<div num='"+c+"' "+(c==0?"class='focus'":"")+"></div>";this.d.innerHTML=l;for(var m=g(this.d),c=0;c<f;c++)m[c].onclick=function(){b.p(parseInt(this.getAttribute("num")))};this.g(this.d)}var k=document.createElement("div");k.className="navPrev";k.setAttribute("onselectstart","return false");k.onclick=function(){if(j)b.i=d<2?b.s(b.i):b.r(b.i);b.h(0)};this.g(k);var h=document.createElement("div");h.className=a[2]?"navPause":"navPlay";h.setAttribute("onselectstart","return false");h.setAttribute("title",a[2]?"Pause":"Play");h.onclick=function(){(a[2]=!a[2])&&b.w(0,1);this.className=a[2]?"navPause":"navPlay";this.setAttribute("title",a[2]?"Pause":"Play");b.t=clearTimeout(b.t);a[2]&&b.w(0,0)};e.parentNode.insertBefore(h,e.nextSibling);var i=document.createElement("div");i.className="navNext";i.setAttribute("onselectstart","return false");i.onclick=function(){if(j)b.i=b.r(b.i);b.h(1)};this.g(i)},p2:function(a){return a.replace(/(?:.*\.)?\w?(\w)[^.]*([\w\-])\.[^.]*$/,"$2$1")},g:function(a){this.u(a);e.parentNode.insertBefore(a,e.nextSibling)},h:function(b){if(a[4]&&d<2)if(b)this.p("iP");else this.p("qR");else{if(!a[5]){if(b&&this.i==f-1)return;if(!b&&this.i==0)return}if(b)this.p(this.r(this.i));else this.p(this.s(this.i))}},w:function(k,l){var m=this,c,i;this.b=k;switch(d){case 0:case 1:if(d)b.style.top="0px";else b.style.left="0px";var h=g(b);if(!k||a[2]){if(a[4]){c=h.length-1;i=h[c];for(var j=1;j<f;j++)if(d==0&&h[j].offsetLeft>e.offsetWidth||d==1&&h[j].offsetTop>e.offsetHeight){c=j-1;if(c==0)c++;i=h[c];if(!a[5]&&i.style.visibility=="hidden")return;break}}else{i=h[1];c=h[1].i;if(!a[5]&&c==0)return}if(l)this.t=setTimeout(function(){m.mL(1,h[0],i,c)},a[0]);else this.mL(1,h[0],i,c)}break;default:this.jj(k,l)}},jj:function(g,d){for(var b=0;b<f;b++)if(b==this.i)if(d){c[b].style.visibility="visible";h(c[b],1)}else{h(c[b],0);c[b].style.visibility="hidden"}else c[b].style.visibility="hidden";if(!g||a[2]){var e=this;if(d)this.t=setTimeout(function(){e.k()},a[0]);else e.k()}},k:function(){var a=this.r(this.i);c[a].style.visibility="visible";h(c[a],0);this.mL(1,c[this.i],c[a],a)},l:function(d){j=1;if(!a[4]){for(var c=this.d.getElementsByTagName("div"),b=0;b<c.length;b++)if(b==d)c[b].className="focus";else c[b].className="nf";i.a&&largeImageOptions.AutoDisplay&&this.q(d)}},mL:function(i,a,b,c){var e=this;if(this.b&&this.a){clearTimeout(e.t);this.t=setTimeout(function(){e.mL(1,a,b,c)},999);return}i&&this.l(c);this.b=0;var f;switch(d){case 2:h(a,a.o-this.c);h(b,b.o+this.c);f=a.o<=0&&b.o>=1;if(f){j=0;this.i=c;this.w(1,1)}else this.t=setTimeout(function(){e.mL(0,a,b,c)},15);break;default:var g=d?b.offsetTop-a.offsetTop:b.offsetLeft-a.offsetLeft;this.n(a,b,c,d,g)}},n:function(l,o,h,k,d){var c,f;if(k){c=b.offsetTop-this.c;if(c<-d)c=-d;b.style.top=c+"px";f=c==-d}else{c=b.offsetLeft-this.c;if(c<-d)c=-d;b.style.left=c+"px";f=c==-d}if(f){j=0;var e;this.i=h;if(a[4])for(var m=g(b),i=0;i<h;i++){e=b.appendChild(m[i]);if(!a[5])e.style.visibility="hidden"}else{e=b.appendChild(l);if(!a[5])e.style.visibility="hidden"}this.w(1,1)}else{var n=this;this.t=setTimeout(function(){n.n(l,o,h,k,d)},15)}},o:function(f,c){f&&this.l(c);var e,a;if(d==1){a=b.offsetTop+this.c;if(a>0)a=0;b.style.top=a+"px"}else{a=b.offsetLeft+this.c;if(a>0)a=0;b.style.left=a+"px"}e=a==0;if(e){j=0;this.i=c;this.w(1,1)}else{var g=this;this.t=setTimeout(function(){g.o(0,c)},15)}},p:function(j){var n=this;clearTimeout(n.t);if(d>1){this.i=this.s(j);this.w(0,0)}else{var o=d?"top":"left";if(j=="iP")this.w(0,0);else if(j=="qR"){var c=g(b),m,l=c[0];m=c[0];for(var h=c.length-1;h>0;h--){if(!d&&l.offsetLeft+c[h].offsetWidth>e.offsetWidth&&h!=c.length-1)break;if(d&&l.offsetTop+c[h].offsetHeight>e.offsetHeight&&h!=c.length-1)break;if(!a[5]){if(c[h].i==c.length-1)break;c[h].style.visibility="visible"}m=b.insertBefore(c[h],m)}if(d)b.style.top=-l.offsetTop+"px";else b.style.left=-l.offsetLeft+"px";this.o(1,this.i)}else{var c=g(b),k,i;if(j==this.i){this.w(1,1);return}else if(j<this.i&&!(this.i==f-1&&j==0&&a[5])||this.i==0&&j==f-1&&a[5]){k=j;i=c[0];for(var h=c.length-1;h>0;h--){i=b.insertBefore(c[h],i);if(!a[5])i.style.visibility="visible";if(i.i==k)break}if(d)b.style.top=-i.offsetHeight+"px";else b.style.left=-i.offsetWidth+"px";this.o(1,k)}else{k=this.s(j);i=c[0];for(var h=0;h<c.length;h++)if(c[h].i==k){i=c[h];break}else{i=b.appendChild(c[h]);if(!a[5])i.style.visibility="hidden"}this.w(0,0)}}}},q:function(d){var a=c[d].getElementsByTagName("img"),b;a.length&&(b=a[0].getAttribute("largeImage"))&&i.h(a[0],b)},r:function(a){return a+1<f?a+1:0},s:function(a){return a-1<0?f-1:a-1},$4:function(b,c){var a=c==0?b.nextSibling:b.firstChild;while(a&&a.nodeType!=1)a=a.nextSibling;return a},u:function(a){var b=this;a.onmouseover=function(){b.a=1};a.onmouseout=function(){b.a=0}},v:function(){var c;if(a[1]==0)if(d>1)c=1;else c=3e3;else switch(d){case 2:c=15/a[1];break;case 1:c=Math.ceil(15*(a[4]?e.offsetHeight:this.$4(b,1).offsetHeight)/a[1]);break;default:c=Math.ceil(15*(a[4]?e.offsetWidth:this.$4(b,1).offsetWidth)/a[1])}return c}};var p=function(){if(document.getElementById(a[3])){i=new m;k=new l(document.getElementById(a[3]))}},t=function(a){o(a);q(function(){p(a)})};t(s);return{next:function(){k.h(1)},previous:function(){k.h(0)},getAuto:function(){return a[2]},switchAuto:function(){(a[2]=!a[2])&&k.w(0,1)}}}
HTML就在这里
<div class="demo" style="background:black;">
<div id="imageSliderWrapper" style="background:black;">
<div id="imageSliderLargeImage"></div>
<div id="imageSlider">
<div>
<img src="http://placehold.it/100X100" largeimage="http://placehold.it/500X300" />
</div>
<div>
<img src="http://placehold.it/100X100" largeimage="http://placehold.it/500X300" />
</div>
<div>
<img src="http://placehold.it/100X100" largeimage="http://placehold.it/500X300" />
</div>
<div>
<img src="http://placehold.it/100X100" largeimage="http://placehold.it/500X300" />
</div>
<div>
<img src="http://placehold.it/100X100" largeimage="http://placehold.it/500X300" />
</div>
<div>
<img src="http://placehold.it/100X100" largeimage="http://placehold.it/500X300" />
</div>
<div>
<img src="http://placehold.it/100X100" largeimage="http://placehold.it/500X300" />
</div>
<div>
<img src="http://placehold.it/100X100" largeimage="http://placehold.it/500X300" />
</div>
</div>
</div>
</div>
当我使用2个或更多相同的滑块时，请告诉我。为什么不这些工作。当我只使用1然后它工作..