核心代码如下，大家可以参考
复制代码 代码如下:
<script src="/UploadFiles/2021-04-02/jquery.js"><script> 
$(document).ready(function(){ 

       $(".bannerbutton li").each( 
                     function(){ 
                            $(this).click( 
                                   function(){ 
                                          bannerGo($(this).attr("num")); 
                                   } 
                            ) 
                     } 
              ) 
       $(".img li:last").html($(".img li:first").html()); 
}); 
var active=1;//当前显示第1个 
var picNum=4;//4个图转换 
var time=500;//移动速度 
var intTime=3000;//自动转换间隔时间 
var width=568; //图片宽 
var perDistance=57;//每次移动距离 
var tagObj=0; 
var marquee; 
var autoMarquee; 
var distance; 
var tmpDistance=0; 
var listLeft=0; 
var tagLeft=0; 
var move=false; 



function bannerGo(tag){ 
       if(active != tag){ 
              if(!move){ 
              listLeft=parseInt($(".banner ul.img").css("left")); 
              distance=(tag-active)*width; 
              tmpDistance=0; 
              perTime=parseInt(time*perDistance/distance); 
              if(tag>active){ 
                     tagLeft=listLeft-distance; 
                     marquee=setInterval("Marquee(1)",perTime) 
              }else{ 
                     tagLeft=listLeft-distance; 
                     marquee=setInterval("Marquee(0)",perTime) 
              } 
              active=Number(tag); 
              if(active==picNum+1) 
                     active=1; 
              move=true; 
              } 
       } 
} 

function Marquee(t){ 
       var x=false; 
       if(t==0){ 
              listLeft=listLeft+perDistance; 
              if((tagLeft-listLeft)>=perDistance){ 
                     $(".banner ul.img").css("left",listLeft+"px"); 
              }else{ 
                     $(".banner ul.img").css("left",tagLeft+"px"); 
                     x=true; 
              } 
       }else{ 
              listLeft=listLeft-perDistance; 
              if((tagLeft-listLeft)<=perDistance){ 
                     $(".banner ul.img").css("left",listLeft+"px"); 
              }else{ 
                     $(".banner ul.img").css("left",tagLeft+"px"); 
                     x=true; 
              } 
       } 
       if(x){ 
              clearInterval(marquee); 
              tmpDistance=0; 
              listLeft=0; 
              tagLeft=0; 
              move=false; 
              $(".bannerbutton li").css("background","url(/images/index/b2.gif) no-repeat"); 
              $(".bannerbutton li[@num="+active+"]").css("background","url(/images/index/b1.gif) no-repeat"); 
              if(tagObj==picNum+1){ 
              $(".banner ul.img").css("left","0"); 
              active=1; 
              } 
       } 
} 

function autoMarquee(){ 
       tagObj=Number(active)+1; 
       bannerGo(tagObj); 
} 

function autoMarqueeStart(){ 
       if(!move){ 
       marquee=setInterval("autoMarquee()",intTime) 
       }else{ 
       setTimeout("autoMarqueeStart()",time); 
       } 

} 
autoMarqueeStart(); 
</script> 
<style> 
*{margin:0;padding:0;border:0} 
li{float:left;} 
ul{list-style-type:none;} 
.banner{height:228px;width:568px;overflow:hidden;} 
.bannerbutton li{ 
       width:23px; 
       height:22px; 
       background:url(/images/index/b2.gif) no-repeat; 
       cursor:pointer; 
       line-height:22px; 
       text-align: center; 
       color: #fff; 
       font-weight: bold; 
} 
.banner .img li{float:left;} 
.banner .img { 
       position: relative;width:5600px; 
} 
body,td,th { 
       font-size: 12px; 
} 
body { 
       margin-left: 0px; 
       margin-top: 0px; 
       margin-right: 0px; 
       margin-bottom: 0px; 
} 
</style> 
<div class="banner"> 
        <ul class="bannerbutton" style="position:absolute;z-index:2;top:200px;;left:10px;"> 
                                   <li num=1 style="background:url(/images/index/b2.gif);">1</li> 
                                   <li num=2>2</li> 
                                   <li num=3>3</li> 
                                   <li num=4>4</li> 
       </ul> 
  <ul class="img" style="left:0px;"> 
                            <li><img src="/UploadFiles/2021-04-02/bn1.jpg">                            <li><img src="/upload/image/2007-11-17_17-30-42.jpg">                            <li><img src="/UploadFiles/2021-04-02/4bb7eaf902000mnl.jpg">                            <li><img src="/upload/image/Products/2007-11-16_22-11-15.jpg">                            <li></li> 
   </ul> 
</div>