13518219792

NEWS

网站建设资讯

一款不用任何插件精美小巧的JQuery图片轮播-创新互联

现在好多带插件的JQuery焦点图片效果，一个网站那么多效果就要好多插件，这无疑给网站增加一定的负担，现在介绍一款不用任何插件，代码量很少且便于操作的图片轮播效果，希望有所帮助

商水ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

说下思路，比如有三张图片需要轮播，首先把除了第一张以外的图片隐藏掉，然后点击图片右下方相应的按钮来切换图片显示，用JQuery的fadeIn和fadeOut效果就可以，最后设置延时自动加载方法setInterval()来实现图片轮播到头后自动开始新一轮轮播。

效果预览：

HTML部分代码：

#banner_bg是图片下方半透明的title背景图
#banner_info里面内容显示图片标题
部分是右下方三个切换图片的小按钮
#banner_list里面是要轮播的三张图片

CSS样式：

#bannerpositionrelativewidth705pxheight240pxoverflowhiddenfont-size16pxmargin5pxauto
#bannerborder0px
#bannerwidth705pxpositionabsolutecolor#fff0backgroundurl2height38pxz-index1000cursorpointerline-height38pxfont-size14px
#bannerpositionabsolute0px5pxheight38pxline-height38pxcolor#fffz-index1001cursorpointer
#bannerpositionabsolutelist-style-typenonez-index1002margin0padding08px5px
#bannerwidth18pxheight18pxfloatleftdisplayblockcursorpointermargin0pxautobackgroundurl2no-repeatoverflowhiddencolor#a3a1a2font-size9pxline-height18pxtext-aligncenter
#bannerbackgroundurl2no-repeatcolor#78e927
#bannerpositionabsolute

JS部分：

n0
count
bli
ni
tsetInterval
tsetInterval
n>>

 现在发现这个图片轮播在谷歌和FF浏览器下有bug，就是当切换到别的标签页的时候动画停止执行了，等你再切换过来的时候会发现动画疯狂执行，可能是由于浏览器线程处理机制的问题，解决办法是在动画执行完毕之后加上JQuery的stop方法来停止被选元素所有加入队列的动画，这样，就算从另外一个标签页切换回来，他会先停止执行动画，然后再继续执行。

具体代码如下：

在showAuto()方法里加上：

1.  function showAuto()  
2.     {  
3. $("#banner_list a").stop(true,true);
4.         n = n >=count?0 : ++n; //如果n>=图片总个数的话重新赋值为0，也就是从头算起，达到自动切换到第一张的效果 
5.         $("#banner li").eq(n).trigger('click'); 
6.     } 

附上stop方法详解：

定义和用法

stop() 方法停止当前正在运行的动画。

语法

$(selector).stop(stopAll,goToEnd)

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。