87,907
社区成员
发帖
与我相关
我的任务
分享showbo大神，我又来麻烦您了，还是那个js幻灯片问题
/*
* jQuery Nivo Slider v2.3
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(b){var a=function(j,q){var g=b.extend({},b.fn.nivoSlider.defaults,q);var m={currentSlide:0,currentImage:"",totalSlides:0,randAnim:"",running:false,paused:false,stop:false};var d=b(j);d.data("nivo:vars",m);d.css("position","relative");d.addClass("nivoSlider");var e=d.children();e.each(function(){var t=b(this);var s="";if(!t.is("img")){if(t.is("a")){t.addClass("nivo-imageLink");s=t}t=t.find("img:first")}var r=t.width();if(r==0){r=t.attr("width")}var i=t.height();if(i==0){i=t.attr("height")}if(r>d.width()){d.width(r)}if(i>d.height()){d.height(i)}if(s!=""){s.css("display","none")}t.css("display","none");m.totalSlides++});if(g.startSlide>0){if(g.startSlide>=m.totalSlides){g.startSlide=m.totalSlides-1}m.currentSlide=g.startSlide}if(b(e[m.currentSlide]).is("img")){m.currentImage=b(e[m.currentSlide])}else{m.currentImage=b(e[m.currentSlide]).find("img:first")}if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}d.css("background","url("+m.currentImage.attr("src")+") no-repeat");for(var k=0;k<g.slices;k++){var o=Math.round(d.width()/g.slices);if(k==g.slices-1){d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:(d.width()-(o*k))+"px"}))}else{d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:o+"px"}))}}d.append(b('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:g.captionOpacity}));if(m.currentImage.attr("title")!=""){var n=m.currentImage.attr("title")||'';if(n.substr(0,1)=="#"){n=b(n).html()}b(".nivo-caption p",d).html(n);b(".nivo-caption",d).fadeIn(g.animSpeed)}var c=0;if(!g.manualAdvance&&e.length>1){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}if(g.directionNav){d.append('<div class="nivo-directionNav"><a class="nivo-prevNav">上一张</a><a class="nivo-nextNav">下一张</a></div>');if(g.directionNavHide){b(".nivo-directionNav",d).hide();d.hover(function(){b(".nivo-directionNav",d).show()},function(){b(".nivo-directionNav",d).hide()})}b("a.nivo-prevNav",d).bind("click",function(){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")});b("a.nivo-nextNav",d).bind("click",function(){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")})}if(g.controlNav){var l=b('<div class="nivo-controlNav"></div>');d.append(l);for(var k=0;k<e.length;k++){if(g.controlNavThumbs){var f=e.eq(k);if(!f.is("img")){f=f.find("img:first")}if(g.controlNavThumbsFromRel){l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("rel")+'" alt="" /></a>')}else{l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("src").replace(g.controlNavThumbsSearch,g.controlNavThumbsReplace)+'" alt="" /></a>')}}else{l.append('<a class="nivo-control" rel="'+k+'">'+(k+1)+"</a>")}}b(".nivo-controlNav a:eq("+m.currentSlide+")",d).addClass("active");b(".nivo-controlNav a",d).bind("mouseover",function(){if(m.running){return false}if(b(this).hasClass("active")){return false}clearInterval(c);c="";d.css("background","url("+m.currentImage.attr("src")+") no-repeat");m.currentSlide=b(this).attr("rel")-1;p(d,e,g,"control")})}if(g.keyboardNav){b(window).keypress(function(i){if(i.keyCode=="37"){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")}if(i.keyCode=="39"){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")}})}if(g.pauseOnHover){d.hover(function(){m.paused=true;clearInterval(c);c=""},function(){m.paused=false;if(c==""&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}})}d.bind("nivo:animFinished",function(){m.running=false;b(e).each(function(){if(b(this).is("a")){b(this).css("display","none")}});if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}if(c==""&&!m.paused&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}g.afterChange.call(this)});var p=function(r,s,u,x){var y=r.data("nivo:vars");if(y&&(y.currentSlide==y.totalSlides-1)){u.lastSlide.call(this)}if((!y||y.stop)&&!x){return false}u.beforeChange.call(this);if(!x){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}else{if(x=="prev"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}if(x=="next"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}}y.currentSlide++;if(y.currentSlide==y.totalSlides){y.currentSlide=0;u.slideshowEnd.call(this)}if(y.currentSlide<0){y.currentSlide=(y.totalSlides-1)}if(b(s[y.currentSlide]).is("img")){y.currentImage=b(s[y.currentSlide])}else{y.currentImage=b(s[y.currentSlide]).find("img:first")}if(u.controlNav){b(".nivo-controlNav a",r).removeClass("active");b(".nivo-controlNav a:eq("+y.currentSlide+")",r).addClass("active")}if(y.currentImage.attr("title")!=""){var z=y.currentImage.attr("title")||'';if(z.substr(0,1)=="#"){z=b(z).html()}if(b(".nivo-caption",r).css("display")=="block"){b(".nivo-caption p",r).fadeOut(u.animSpeed,function(){b(this).html(z);b(this).fadeIn(u.animSpeed)})}else{b(".nivo-caption p",r).html(z)}b(".nivo-caption",r).fadeIn(u.animSpeed)}else{b(".nivo-caption",r).fadeOut(u.animSpeed)}var w=0;b(".nivo-slice",r).each(function(){var i=Math.round(r.width()/u.slices);b(this).css({height:"0px",opacity:"0",background:"url("+y.currentImage.attr("src")+") no-repeat -"+((i+(w*i))-i)+"px 0%"});w++});if(u.effect=="random"){var A=new Array("fold");y.randAnim=A[Math.floor(Math.random()*(A.length+1))];if(y.randAnim==undefined){y.randAnim="fade"}}if(u.effect.indexOf(",")!=-1){var A=u.effect.split(",");y.randAnim=b.trim(A[Math.floor(Math.random()*A.length)])}y.running=true;if(u.effect=="sliceDown"||u.effect=="sliceDownRight"||y.randAnim=="sliceDownRight"||u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("top","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUp"||u.effect=="sliceUpRight"||y.randAnim=="sliceUpRight"||u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("bottom","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUpDown"||u.effect=="sliceUpDownRight"||y.randAnim=="sliceUpDown"||u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){var t=0;var w=0;var B=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);if(w==0){i.css("top","0px");w++}else{i.css("bottom","0px");w=0}if(B==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;B++})}else{if(u.effect=="fold"||y.randAnim=="fold"){var t=0;var w=0;b(".nivo-slice",r).each(function(){var i=b(this);var v=i.width();i.css({top:"0px",height:"100%",width:"0px"});if(w==u.slices-1){setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="fade"||y.randAnim=="fade"){var w=0;b(".nivo-slice",r).each(function(){b(this).css("height","100%");if(w==u.slices-1){b(this).animate({opacity:"1.0"},(u.animSpeed*2),"",function(){r.trigger("nivo:animFinished")})}else{b(this).animate({opacity:"1.0"},(u.animSpeed*2))}w++})}}}}}};var h=function(i){if(this.console&&typeof console.log!="undefined"){console.log(i)}};this.stop=function(){if(!b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=true;h("Stop Slider")}};this.start=function(){if(b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=false;h("Start Slider")}};g.afterLoad.call(this)};b.fn.nivoSlider=function(c){return this.each(function(){var d=b(this);if(d.data("nivoslider")){return}var e=new a(this,c);d.data("nivoslider",e)})};b.fn.nivoSlider.defaults={effect:"random",slices:15,animSpeed:1000,pauseTime:6000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};b.fn._reverse=[].reverse})(jQuery);首先感谢您的帮助。
我把选择图片的小图标点击效果改为滑过以后，选择图片时要等图片效果载入完成后移动到另一个图标才能显示对应的图片。您能不能帮我改为实时滑过实时切换呢
另外就是css控制容器还有图片的高度和宽度无效，请您也帮我改为用css控制高宽吧。
这两天给您添麻烦了，请再帮我一下吧
...全文
请发表友善的回复…
发表回复
Go 旅城通票 2016-01-15
- 打赏
- 举报
非常感谢，这个效果太漂亮了，对了，您推荐的这个效果的上一个下一个怎么让它直接显示出来，而不是鼠标移动上去才显示。我像您那天说的配置directionNavHide:false，我就照葫芦画瓢 $('#flash').coinslider({directionNavHide:false});结果不行。还得麻烦您告知一下。
还有就是做个人网站的话，用jq库哪个版本比较好，我在网上搜索说是最新版本最好，请问大神您怎么看
[/quote]
够用就好，反正我一直用1.4.1的。不能直接照搬，配置不一样，下午有空了帮你看下
baidu_33678160 2016-01-15
- 打赏
- 举报
非常感谢，这个效果太漂亮了，对了，您推荐的这个效果的上一个下一个怎么让它直接显示出来，而不是鼠标移动上去才显示。我像您那天说的配置directionNavHide:false，我就照葫芦画瓢 $('#flash').coinslider({directionNavHide:false});结果不行。还得麻烦您告知一下。
还有就是做个人网站的话，用jq库哪个版本比较好，我在网上搜索说是最新版本最好，请问大神您怎么看
Go 旅城通票 2016-01-15
- 打赏
- 举报
必须要要等待动画完成才能进行下一次的动画的，要不会乱。
这个插件没有配置宽度什么的，好像是依据图片大小来定的，你的图片大小一致，导进去会自动设置容器为你图片的高宽一致。
你的这个插件在chrome下会有间隙，显示不好。推荐你用这个coin-slider.js这个，如果点击多次会播放所有动画到你点击到的页面。chrome显示也完美，可以自己配置高度，宽度和效果
jquery焦点图代码，幻灯过渡特效，仿IE特效滤镜
baidu_33678160 2016-01-15
- 打赏
- 举报
非常感谢，这个效果太漂亮了，对了，您推荐的这个效果的上一个下一个怎么让它直接显示出来，而不是鼠标移动上去才显示。我像您那天说的配置directionNavHide:false，我就照葫芦画瓢 $('#flash').coinslider({directionNavHide:false});结果不行。还得麻烦您告知一下。
还有就是做个人网站的话，用jq库哪个版本比较好，我在网上搜索说是最新版本最好，请问大神您怎么看
[/quote]
够用就好，反正我一直用1.4.1的。不能直接照搬，配置不一样，下午有空了帮你看下[/quote]
好的，再次感谢。如果您的时间允许，顺便帮我看看您推荐的这个幻灯片的图片怎样才可以拉伸，比如我设置容器宽度为1000px，高度200px。我的图片实际大小为300*100像素，我通过css控制图片高宽为容器的高宽，图片大小的设置却始终无效。[/quote]
这个不行。。你的容器配置width/height一定要和图片一样大小，不能做拉伸处理，因为滤镜那种效果时通过背景图片来模拟的。
如果容器配置大了图片会出现重复，配置小了图片显示不全
或者试试这种效果：http://www.w3dev.cn/eg/photo-turn-page/[/quote]
明白了，上一个下一个那个可以改一下吗[/quote]
上一个下一个那个改好了。。你重新下载就行了。看下配置。。里面有说明[/quote]
非常感谢，这个效果太漂亮了，对了，您推荐的这个效果的上一个下一个怎么让它直接显示出来，而不是鼠标移动上去才显示。我像您那天说的配置directionNavHide:false，我就照葫芦画瓢 $('#flash').coinslider({directionNavHide:false});结果不行。还得麻烦您告知一下。
还有就是做个人网站的话，用jq库哪个版本比较好，我在网上搜索说是最新版本最好，请问大神您怎么看
[/quote]
够用就好，反正我一直用1.4.1的。不能直接照搬，配置不一样，下午有空了帮你看下[/quote]
好的，再次感谢。如果您的时间允许，顺便帮我看看您推荐的这个幻灯片的图片怎样才可以拉伸，比如我设置容器宽度为1000px，高度200px。我的图片实际大小为300*100像素，我通过css控制图片高宽为容器的高宽，图片大小的设置却始终无效。[/quote]
这个不行。。你的容器配置width/height一定要和图片一样大小，不能做拉伸处理，因为滤镜那种效果时通过背景图片来模拟的。
如果容器配置大了图片会出现重复，配置小了图片显示不全
或者试试这种效果：http://www.w3dev.cn/eg/photo-turn-page/[/quote]
明白了，上一个下一个那个可以改一下吗[/quote]
上一个下一个那个改好了。。你重新下载就行了。看下配置。。里面有说明[/quote]
彻底膜拜中
Go 旅城通票 2016-01-15
- 打赏
- 举报
非常感谢，这个效果太漂亮了，对了，您推荐的这个效果的上一个下一个怎么让它直接显示出来，而不是鼠标移动上去才显示。我像您那天说的配置directionNavHide:false，我就照葫芦画瓢 $('#flash').coinslider({directionNavHide:false});结果不行。还得麻烦您告知一下。
还有就是做个人网站的话，用jq库哪个版本比较好，我在网上搜索说是最新版本最好，请问大神您怎么看
[/quote]
够用就好，反正我一直用1.4.1的。不能直接照搬，配置不一样，下午有空了帮你看下[/quote]
好的，再次感谢。如果您的时间允许，顺便帮我看看您推荐的这个幻灯片的图片怎样才可以拉伸，比如我设置容器宽度为1000px，高度200px。我的图片实际大小为300*100像素，我通过css控制图片高宽为容器的高宽，图片大小的设置却始终无效。[/quote]
这个不行。。你的容器配置width/height一定要和图片一样大小，不能做拉伸处理，因为滤镜那种效果时通过背景图片来模拟的。
如果容器配置大了图片会出现重复，配置小了图片显示不全
或者试试这种效果：http://www.w3dev.cn/eg/photo-turn-page/[/quote]
明白了，上一个下一个那个可以改一下吗[/quote]
上一个下一个那个改好了。。你重新下载就行了。看下配置。。里面有说明
baidu_33678160 2016-01-15
- 打赏
- 举报
非常感谢，这个效果太漂亮了，对了，您推荐的这个效果的上一个下一个怎么让它直接显示出来，而不是鼠标移动上去才显示。我像您那天说的配置directionNavHide:false，我就照葫芦画瓢 $('#flash').coinslider({directionNavHide:false});结果不行。还得麻烦您告知一下。
还有就是做个人网站的话，用jq库哪个版本比较好，我在网上搜索说是最新版本最好，请问大神您怎么看
[/quote]
够用就好，反正我一直用1.4.1的。不能直接照搬，配置不一样，下午有空了帮你看下[/quote]
好的，再次感谢。如果您的时间允许，顺便帮我看看您推荐的这个幻灯片的图片怎样才可以拉伸，比如我设置容器宽度为1000px，高度200px。我的图片实际大小为300*100像素，我通过css控制图片高宽为容器的高宽，图片大小的设置却始终无效。[/quote]
这个不行。。你的容器配置width/height一定要和图片一样大小，不能做拉伸处理，因为滤镜那种效果时通过背景图片来模拟的。
如果容器配置大了图片会出现重复，配置小了图片显示不全
或者试试这种效果：http://www.w3dev.cn/eg/photo-turn-page/[/quote]
明白了，上一个下一个那个可以改一下吗
Go 旅城通票 2016-01-15
- 打赏
- 举报
非常感谢，这个效果太漂亮了，对了，您推荐的这个效果的上一个下一个怎么让它直接显示出来，而不是鼠标移动上去才显示。我像您那天说的配置directionNavHide:false，我就照葫芦画瓢 $('#flash').coinslider({directionNavHide:false});结果不行。还得麻烦您告知一下。
还有就是做个人网站的话，用jq库哪个版本比较好，我在网上搜索说是最新版本最好，请问大神您怎么看
[/quote]
够用就好，反正我一直用1.4.1的。不能直接照搬，配置不一样，下午有空了帮你看下[/quote]
好的，再次感谢。如果您的时间允许，顺便帮我看看您推荐的这个幻灯片的图片怎样才可以拉伸，比如我设置容器宽度为1000px，高度200px。我的图片实际大小为300*100像素，我通过css控制图片高宽为容器的高宽，图片大小的设置却始终无效。[/quote]
这个不行。。你的容器配置width/height一定要和图片一样大小，不能做拉伸处理，因为滤镜那种效果时通过背景图片来模拟的。
如果容器配置大了图片会出现重复，配置小了图片显示不全
或者试试这种效果：http://www.w3dev.cn/eg/photo-turn-page/
baidu_33678160 2016-01-15
- 打赏
- 举报
非常感谢，这个效果太漂亮了，对了，您推荐的这个效果的上一个下一个怎么让它直接显示出来，而不是鼠标移动上去才显示。我像您那天说的配置directionNavHide:false，我就照葫芦画瓢 $('#flash').coinslider({directionNavHide:false});结果不行。还得麻烦您告知一下。
还有就是做个人网站的话，用jq库哪个版本比较好，我在网上搜索说是最新版本最好，请问大神您怎么看
[/quote]
够用就好，反正我一直用1.4.1的。不能直接照搬，配置不一样，下午有空了帮你看下[/quote]
好的，再次感谢。如果您的时间允许，顺便帮我看看您推荐的这个幻灯片的图片怎样才可以拉伸，比如我设置容器宽度为1000px，高度200px。我的图片实际大小为300*100像素，我通过css控制图片高宽为容器的高宽，图片大小的设置却始终无效。
