【HTML实现div循环滚动展示】_设置div中的内容循环滚动_一小颗泡泡糖的博客

实现div循环切换（swiper插件）

注：swiper官网：https://2.swiper.com.cn/usage/index.html

首先加载插件，点击下载基础测试包，测试包里面已经包含了js和css文件。注意引用路径的修改
（下载地址：https://2.swiper.com.cn/download/index.html#file1）

书写HTML文件内容

<div class="swiper-container">
  <div class="swiper-wrapper">
      <div class="swiper-slide"> DIV页面1</div>
      <div class="swiper-slide"> DIV页面2</div>
      <div class="swiper-slide"> DIV页面3</div>
调用函数，根据需求进行相关参数修改，其他参数见官网 
<script type="text/javascript">
window.onload = function() {
  var mySwiper = new Swiper('.swiper-container',{
    loop: true
    //自动播放间隔
    autoplay: 5000,
    //用户点击后是否影响自动播放
	autoplayDisableOnInteraction: false
</script>
                    实现div循环切换（swiper插件）注：swiper官网：https://2.swiper.com.cn/usage/index.html首先加载插件，点击下载基础测试包，测试包里面已经包含了js和css文件。注意引用路径的修改（下载地址：https://2.swiper.com.cn/download/index.html#file1）&lt;head&gt;  &lt;link rel="stylesheet" href="css/idangerous.swiper.css"&gt; 
		var tmp = (obj.scrollLeft)++;
		//当滚动条到达右边顶端时
		if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
		//当滚动条滚动了初始
				.content{width:500px;height:300px;left:200px;top:100px;border:solid 2px red;padding:10px;overflow:hidden}
 dl{width:400px;height:30px;border:1px solid black;}
				使用CSS3来实现
若要用CSS3的属性实现的话，非animation莫属，因为transition是需要手动的触发，而且不能无限次执行下去，而animation恰好能解决这个问题。
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
这段代码中，`.danmu` 类设置了绝对定位，`top` 属性设置为 0，`left` 属性设置为 100%，使弹幕从右侧进入。`white-space: nowrap` 属性使文本不换行。`animation` 属性设置了动画名称、持续时间、动画速度和动画次数。
`@keyframes` 规则定义了动画的关键帧，从右侧进入到左侧出去。`transform: translateX()` 属性使元素在水平方向上移动。
当弹幕滚动到左侧时，会重新从右侧进入，形成无限滚动的效果。