资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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


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

公司主营业务：做网站、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出邯郸免费做网站回馈大家。

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

效果预览：

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

 

HTML部分代码：

 

  1.  
  2.     
 
  •     
    •  
  •      
  •      
  •      
  •      
  •      
  •     
    •  
  •  

    • #banner_bg是图片下方半透明的title背景图
#banner_info里面内容显示图片标题

    CSS样式：

    1. #banner {position:relative; width:705px; height:240px; overflow:hidden; font-size:16px; margin:5px auto;} 
    2. #banner_list img {border:0px;} 
    3. #banner_bg {width:705px;position:absolute; color:#fff; bottom:0; background:url(../v2_p_w_picpaths/toumingbar.png);height:38px;z-index:1000;cursor:pointer; line-height:38px; font-size:14px;} 
    4. #banner_info{position:absolute; bottom:0px; left:5px;height:38px; line-height:38px; color:#fff;z-index:1001;cursor:pointer} 
    5. #banner ul {position:absolute;list-style-type:none; ;z-index:1002;margin:0; padding:0; bottom:8px; right:5px;} 
    6. #banner ul li {width:18px; height:18px;float:left;display:block;cursor:pointer; margin:0px auto; background:url(../v2_p_w_picpaths/scropoint.png) no-repeat;overflow:hidden; color:#a3a1a2; font-size:9px; line-height:18px; text-align:center;} 
    7. #banner ul li.on {background:url(../v2_p_w_picpaths/scropoint_on.png) no-repeat; color:#78e927;} 
    8. #banner_list a{position:absolute;

    JS部分：

    1.  
    2.     var n =0;  
    3.     var t;  
    4.     var count; //定义所需变量 
    5.     $(function(){  
    6.         $("li:first").addClass("on");  //给第一个按钮加上选中样式 
    7.         count=$("#banner_list a").length; //为了让HTML上的代码可自动循环就必须定义banner_list下所含图片的长度           
    8.         $("#banner_list a:not(:first-child)").hide(); //让除了不是第一张图的隐藏掉 
    9.         $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt')); //把图片的alt属性的值添加到标题栏上去 
    10.         $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")}); //点击标题另开新窗口打开对应链接 
    11.         var bli = $("#banner li");  
    12.         bli.each(function(i){ //利用JQuery的遍历实现点击li的时候自动切换到下一张 
    13.             bli.eq(i).click(function(){  
    14.             n = i;  
    15.             $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); 
    16.             $("#banner_list a").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(500); //筛选出所有可见元素，然后取当前点击的fadeOut，其他的fadeIn 
    17.             $(this).addClass("on"); //给所点击的li加上样式 
    18.             $(this).siblings().removeAttr("class");  
    19.                 }); //移除同级li的样式 
    20.             }); 
    21.             t = setInterval("showAuto()", 3000);  
    22.             $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 3000);});  
    23.     }) //设置自动执行时间为3s，利用setInterval自动无限延时加载，同时鼠标放上去后移除自动加载效果，鼠标移开后再继续执行轮播方法。 
    24.   
    25.     function showAuto()  
    26.     {  
    27.         n = n >=count?0 : ++n; //如果n>=图片总个数的话重新赋值为0，也就是从头算起，达到自动切换到第一张的效果 
    28.         $("#banner li").eq(n).trigger('click'); 
    29.     } //在每一个匹配的li上绑定触发click事件  
    30.  

     

     现在发现这个图片轮播在谷歌和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 参数时使用。

     

     


    网页标题：一款不用任何插件精美小巧的JQuery图片轮播
    当前地址：http://cdkjz.cn/article/pehjes.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    成都SEO优化成都艺考培训成都网站设计雅安机房托管重庆外贸网站建设南充网站建设H5网站制作企业网站建设公司遂宁海缘科技虚拟主机购买

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图