一款不用任何插件精美小巧的JQuery图片轮播-创新互联-成都快上网建站

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

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

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

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

效果预览:

一款不用任何插件精美小巧的JQuery图片轮播

HTML部分代码:


  • #banner_bg是图片下方半透明的title背景图
    #banner_info里面内容显示图片标题
    
    CSS样式:
    
    1. #bannerpositionrelativewidth705pxheight240pxoverflowhiddenfont-size16pxmargin5pxauto
    2. #bannerborder0px
    3. #bannerwidth705pxpositionabsolutecolor#fff0backgroundurl2height38pxz-index1000cursorpointerline-height38pxfont-size14px
    4. #bannerpositionabsolute0px5pxheight38pxline-height38pxcolor#fffz-index1001cursorpointer
    5. #bannerpositionabsolutelist-style-typenonez-index1002margin0padding08px5px
    6. #bannerwidth18pxheight18pxfloatleftdisplayblockcursorpointermargin0pxautobackgroundurl2no-repeatoverflowhiddencolor#a3a1a2font-size9pxline-height18pxtext-aligncenter
    7. #bannerbackgroundurl2no-repeatcolor#78e927
    8. #bannerpositionabsolute

    JS部分:

    1. n0
    2. count
    3. bli
    4. ni
    5. tsetInterval
    6. tsetInterval
    7. 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)
    参数 描述
    stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
    goToEnd

    可选。规定是否允许完成当前的动画。

    该参数只能在设置了 stopAll 参数时使用。

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


    当前标题:一款不用任何插件精美小巧的JQuery图片轮播-创新互联
    文章源于:http://kswjz.com/article/dopgsi.html
    扫二维码与项目经理沟通

    我们在微信上24小时期待你的声音

    解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

    其他资讯