跑马灯可以实现播放和暂停以及调速

fjnh

已于 2022-01-27 14:04:10 修改

阅读量561

点赞数

分类专栏：跑马灯实现播放和暂停以及调速走马灯文章标签： html css3 html5

于 2021-11-12 13:30:04 首次发布

本文链接：https://blog.csdn.net/qq_41810380/article/details/121286164

版权

跑马灯实现播放和暂停以及调速同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

走马灯

1 篇文章 0 订阅

订阅专栏

跑马灯可以实现播放和暂停以及调速

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link
      rel="stylesheet"
      href="swiper/swiper-bundle.min.css"
    />
		<title></title>
	</head>
	<link rel="stylesheet" href="css/liMarquee.css">
	<style type="text/css">
		body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

		#stopan,#start{
			width: 100px;
			height: 50px;
			position: fixed;
			left: 50px;
			top: 100px;
			z-index: 2020;
		}
		#start{
			left: 150px;
		}
		.str_div{
			position:absolute;
			width:100px;
			height:100px;
			z-indent:2;
			left:100px;
			top:100px;
			color:yellow;
			font-size: 25px
		}

	</style>
	<body>
		<button type="button" id="stopan">点击停止动画</button>
		<button type="button" id="start">点击开始动画</button>	
		<div class="str4 str_wrap">
			<a href="#" >
				<img src="src/img/use/1.png">
				<div class ="str_div">1</div>				
			</a>

			<a href="#">
				<img src="src/img/use/2.png">
				<div class ="str_div">2</div>
			</a>
			<a href="#">
				<img src="src/img/use/3.png">
				<div class ="str_div">3</div>
			</a>
			<a href="#">
				<img src="src/img/use/4.png">
				<div class ="str_div">4</div>
			</a>
			<a href="#">
				<img src="src/img/use/5.png">
				<div class ="str_div">5</div>
			</a>
			<a href="#">
				<img src="src/img/use/6.png">
				<div class ="str_div">6</div>
			</a>
			<a href="#">
				<img src="src/img/use/7.png">
				<div class ="str_div">7</div>
			</a>
			<a href="#">
				<img src="src/img/use/8.png">
				<div class ="str_div">8</div>
			</a>
			<a href="#">
				<img src="src/img/use/9.png">
				<div class ="str_div">9</div>
			</a>
			<a href="#">
				<img src="src/img/use/10.png">
				<div class ="str_div">10</div>
			</a>
			<a href="#">
				<img src="src/img/use/11.png">
				<div class ="str_div">11</div>
			</a>
			<a href="#">
				<img src="src/img/use/12.png">
				<div class ="str_div">12</div>
			</a>
			<a href="#">
				<img src="src/img/use/13.png">
				<div class ="str_div">13</div>
			</a>
			<a href="#">
				<img src="src/img/use/14.png">
				<div class ="str_div">14</div>
			</a>
			<a href="#">
				<img src="src/img/use/15.png">
				<div class ="str_div">15</div>
			</a>
			<a href="#">
				<img src="src/img/use/16.png">
				<div class ="str_div">16</div>
			</a>
			<a href="#">
				<img src="src/img/use/17.png">
				<div class ="str_div">17</div>
			</a>
			<a href="#">
				<img src="src/img/use/18.png">
				<div class ="str_div">18</div>
			</a>
			<a href="#">
				<img src="src/img/use/19.png">
				<div class ="str_div">19</div>
			</a>
			<a href="#">
				<img src="src/img/use/20.png">
				<div class ="str_div">20</div>
			</a>
		</div>


    </div>
	</body>
	<script src="js/jquery-1.8.3.min.js"></script>
	<script src="js/jquery.liMarquee.js"></script>
	<script type="text/javascript">
		$('#stopan').on('click',()=>{
			$dowebok.liMarquee('pause')
		})
		$('#start').on('click',()=>{
			$dowebok.liMarquee('play')
		})
		
		$dowebok = $('.str4').liMarquee({
            //默认没有参数 是向左滚动
            direction: 'left',
            // direction: 'right',
            // direction: 'up',
            // direction: 'down',
            //滚动速度
            scrollamount: 2000,
            //非无缝滚动
            circular: true,
            //禁止拖动
            // drag: false,
            //内容不足不滚动
            // runshort: false,
            //鼠标悬停不暂停
            hoverstop: false,
            //反向
            // inverthover: true
        }) 

	$dowebok.liMarquee('pause');


        // 事件
        // $(document).on('click', function () {
        //     // 暂停
        //     // $dowebok.liMarquee('pause');
        //     // 播放
        //     // $dowebok.liMarquee('play');
        //     // 销毁
        //     // $dowebok.liMarquee('destroy');
        //     // 更新
        //     // $dowebok.liMarquee('update');
        // });

	</script>
</html>