二、编写JavaScript代码

接下来，就可以重点开始编写JavaScript代码了。其中，需要用到一些功能函数，以下是代码实现的基本思路：

1. 获取需要展示图片的数量和容器宽度；

2. 获取所有“

3. 将所有“

”元素外，并依据容器宽度和“
• ”元素数量计算需要移动的距离；

  4. 添加判断条件，如果“

  ”元素已经滑动到最右侧，则将其移动到最左侧；

  5. 追加动画效果，以实现平滑的循环滚动效果。

  以下是具体实现的代码细节：

  ```javascript

  $(function(){

  var containerWidth = $(".container").width(); //获取容器宽度

  var liWidth = $(".container ul li").width(); //获取"li"的宽度

  var liNum = $(".container ul li").length; //获取"li"的数量

  var liHeight = $(".container ul li").height(); //获取"li"的高度

  $(".container ul").width(liWidth * liNum); //将"ul"元素的宽度设置为"li"的宽度乘以"li"的数量

  var flag = true;

  var i = 1;

  function Roll(){

  if (flag){

  if (i == liNum){

  $(".container ul").animate({"left": "+=" + liWidth * (liNum - 1)}, 500, function(){

  $(".container ul").css("left", 0);

  });

  i = 1;

  } else {

  $(".container ul").animate({"left": "-=" +liWidth}, 500);

  i++;

  }

  }

  }

  var timer = setInterval(Roll, 2000);

  $(".container").mouseenter(function(){ //鼠标进入停止滚动

  clearInterval(timer);

  flag = false;

  });

  $(".container").mouseleave(function(){ //鼠标离开继续滚动

  timer = setInterval(Roll, 2000);

  flag = true;

  });

  });

  ```

  具体来说，代码首先获取容器宽度、每个“

  • ”元素的宽度、数量以及高度，然后将“
    ”元素的宽度设置为所有“
    • ”元素的宽度之和。接下来，使用“flag”变量来判断是否为第一个“
    • ”元素。如果不是，则继续向左移动一格。如果到达最后一个“
    • ”元素，则将“
      ”元素移动到其左边，并将“i”设置为1。最后，添加鼠标“mouseenter”和“mouseleave”绑定事件，以在鼠标进入时停止滚动，鼠标离开后继续滚动。

      三、优化代码

      仅仅完成了基本的滚动，还需要对代码进行优化，以进一步提高用户体验和页面性能。首先，考虑优化JavaScript代码中的动画效果。在代码中，使用了“animate”函数来实现动画效果。如果“

      ”元素中展示的图片较多，将会占用更多的资源，并使页面变得较为复杂。为了避免这种情况，可以使用CSS3中的“transition”属性来实现动画效果。以下是CSS3的代码实现：

      ```css

      .container ul{

      position: relative;

      left: 0;

      transition: left 0.5s ease-in-out;

      }

      ```

      接下来，考虑如何实现无缝滚动效果。在原代码中，如果到达最后一张图片，则将图片直接移动到左侧，而如果需要查看到最后一张图片，则需要滑动多次。为了实现无缝滚动效果，可以将第一张图片追加到最后一个位置上，以实现无限循环。为了避免页面太过繁琐，可以在JavaScript中使用以下的代码：

      ```javascript

      //将第一张图片追加到最后一个位置上

      $(".container ul li:first-child").clone().appendTo($(".container ul"));

      ```

      以上代码实现了将第一张图片追加到最后一个位置上的功能。实现无缝滚动后，可以修改JavaScript代码中的“if”语句，以实现无限滚动效果。在此基础上，还可以使用“setTimeout”函数和“requestAnimationFrame”函数结合，实现更平滑的滚动效果。

      最后，完整代码如下：

      ```javascript

      $(function(){

      var containerWidth = $(".container").width(); //获取容器宽度

      var liWidth = $(".container ul li").width(); //获取"li"的宽度

      var liNum = $(".container ul li").length; //获取"li"的数量

      var liHeight = $(".container ul li").height(); //获取"li"的高度

      $(".container ul").width(liWidth * (liNum + 1)); //将"ul"元素的宽度设置为"li"的宽度与数量之和

      //将第一张图片追加到最后一个位置上

      $(".container ul li:first-child").clone().appendTo($(".container ul"));

      var flag = true;

      var i = 1;

      function Roll(){

      if (flag){

      var marginLeft = liWidth * i;

      $(".container ul").css("transform", "translate3d(-" + marginLeft + "px,0,0)");

      i++;

      if (i > liNum){

      i = 1;

      setTimeout(function(){

      $(".container ul").css({"transition-duration": "0s", "transform": "translate3d(0,0,0)"});

      }, 500);

      setTimeout(function(){

      $(".container ul").css({"transition-duration": "0.5s", "transform": "translate3d(-" + liWidth * i + "px,0,0)"});

      i++;

      }, 600);

      }

      }

      requestAnimationFrame(Roll);

      }

      var timer = setTimeout(Roll, 2000);

      $(".container").mouseenter(function(){

      clearTimeout(timer);

      flag = false;

      });

      $(".container").mouseleave(function(){

      timer = setTimeout(Roll, 2000);

      flag = true;

      });

      });

      ```

      以上是实现图片循环滚动的代码，通过逐步调整和优化，可以得到更平滑、更流畅的滚动效果，提升页面的视觉效果和用户体验。