新闻左右滚动JS实现

最新推荐文章于 2023-05-13 11:22:46 发布

JT-Lee

最新推荐文章于 2023-05-13 11:22:46 发布

阅读量3.3k

点赞数

分类专栏：前端文章标签： JavaScript JS HTML JQuery

本文链接：https://blog.csdn.net/a496401006/article/details/82464834

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自己写的一个列表左右滚动的Demo，各个HTML的元素的样式可以根据自己的需求来更改，下面是代码

<!doctype html>
<html>

<head>
	<title>列表左右滚动</title>
	<meta charset="utf-8">
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
			color: #000;
		}

		.box {
			width: 600px;
			height: 30px;
			line-height:30px;
			position: relative;
			overflow: hidden;
			margin: 80px auto;
			border: 1px solid #eee;
		}

		.roll {
			position: absolute;
			left: 0;
			top: 0;
		}

		.roll li {
			color: #fff;
			width: 200px;
			line-height: 30px;
			height: 30px;
			float: left;
			text-align: center;
		}

		.roll li a {
			text-decoration: underline;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>
	<div class="box">
		<ul class="roll">
			<li>
				<a href="http://www.baidu.com/" target="_blank">前后端分离之Vue（二）前后端结合</a>
			</li>
			<li>
				<a href="http://www.baidu.com/" target="_blank">JQuery插件机制</a>
			</li>
			<li>
				<a href="http://www.baidu.com/" target="_blank">ES6学习系列——Module</a>
			</li>
			<li>
				<a href="http://www.baidu.com/" target="_blank">前后端分离之Vue（二）前后端结合</a>
			</li>
			<li>
				<a href="http://www.baidu.com/" target="_blank">DOM --- Document类型常用的属性和方法</a>
			</li>
			<li>
				<a href="http://www.baidu.com/" target="_blank">Web前端框架学习—Bootstrap</a>
			</li>
		</ul>
	</div>
	<script type="text/javascript">

		(function ($) {
			$.fn.extend({
				cusmerSilder: function (options) {
					var $ul = $(this).find("ul");
					var ul_width = $ul.width();
					var box_width = $(this).width();
					if (box_width > ul_width) return;

					init();
					ul_width = $ul.width();
					var current = 0;
					var timer = null;

					$ul.hover(function () {
						clearInterval(timer);
					}, function () {
						timer = setInterval(function () {
							goLeft();							
						}, 20);
					}).trigger("mouseleave");


					function init() {
						var $ul_li = $ul.find("li");
						var li_length = $ul_li.length;
						var li_width = $ul_li.first().width();
						$ul.css("width", li_width * li_length * 2);
						$ul.append($ul.html());
					}
					function goLeft(){
						--current;
						if (current == -(ul_width / 2)) {
							current = 0;
						}
						$ul.css({ left: current });
					}
				}
			});
		})(jQuery)

		$(function () {
			$(".box").cusmerSilder();

		});
	</script>

</body>

</html>

JT-Lee

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
新闻左右滚动JS实现

自己写的一个列表左右滚动的Demo，各个HTML的元素的样式可以根据自己的需求来更改，下面是代码 &lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;列表左右滚动&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text
复制链接

扫一扫