jquery实现图片的向左和向右切换一组图片

最新推荐文章于 2018-09-10 08:06:57 发布

原创最新推荐文章于 2018-09-10 08:06:57 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #图片 #animate

Jquery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的图片轮播功能，通过左右按钮控制图片组的切换，并详细展示了实现该功能所需的JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery实现图片的向左和向右切换一组图片

/*切换图片*/
$(function(){
           var $width=$("#div3").width();
           var $div=$(".prolist_content");
           var $page=1;
           //求出总的图片数
           var $img=$(".prolist_content ul li").length;
           var $pagesize=4;
           var $page_count=Math.ceil($img/$pagesize);
           //向左移动
           $(".goLeft").click(function(){
               if($page==$page_count){
                       $div.stop(true,true).animate({'left':0+'px'},600);
                       $page=1;
               }else{
                       $div.stop(true,false).animate({'left':"-="+$width+'px'},600);
                       $page++;
                       }
           })
               $(".goRight").click(function(){
               if($page==1){
                       $div.stop(true,false).animate({'left':"-="+$width*($page_count-1)+"px"},600);
                       $page=$page_count;
               }else{
                       $div.animate({'left':"+="+$width+'px'},600);
                       $page--;
                       }
           })

})