无缝滚动小实例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/messicr7/article/details/85005156

.group .items{
	width: 95%; 
	height: 180px;
	overflow: hidden;
	margin:25px auto;
}
.group .items ul{
	width: 99999px;
    overflow: hidden;
}
.group .items ul>li{
	width: 170px; 
	text-align: center;
	padding: 20px 10px 5px 15px;
	display: inline-block;
    float: left;
}
.group .items ul > li > a{
	display: block;
	height: 70px;
}
.group .items ul > li > a > img{
	height: auto;
	height: 28px;
	width: auto;
	max-width: 100%;
	display: block;
	margin: auto;
}

<script type="text/javascript">
	$(document).ready(function() {
		$("#mainNav .navList .index").addClass("active");
		itemMarguee();
	});
	// 滑动
	function itemMarguee(){
		$("#items ul").animate({marginLeft:"-190px"},8000, function () {
			$("#items ul>li").eq(0).appendTo($("#items ul"));
			$("#items ul").css('marginLeft','0px');
		})
		setTimeout(itemMarguee(),8000);
	};

</script>

<div class="group">
	<div class="items" id="items">
		<ul>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_0.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_1.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_2.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_3.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_4.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_5.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_6.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_7.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_8.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_9.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_10.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_11.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_12.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_13.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_14.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_15.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_16.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_17.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_18.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_19.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_20.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_21.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_22.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_23.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_24.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_25.png')}">
				</a>
			</li>
			<li>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_26.png')}">
				</a>
				<a href="JavaScript:void(0)" target="_blank">
					<img src="${fn:getResource('static/hdds/skins/images/group/logo_27.png')}">
				</a>
			</li>
		</ul>
	</div>
</div>