Seamless seen cases of carousel

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<style>
			* {
			    margin: 0;
			    padding: 0;
				list-style: none;
			}
			/* 轮播的盒子 */
			.notice-list3{
				height: 300px;
				position: relative;
				top: 0;
			}
			/* 最大的盒子 */
			#container{
			    width: 60%;
			    margin: 100px auto;
			    position: relative;
				height: 250px;
			    overflow: hidden;
				/* 防止溢出 */
			}
			ul {
			 /*   background: #f8f8f8; */
			    text-align: center;
			    padding: 0 20px;
			}
			li{
			    height: 35px;
			    line-height: 35px;
			    color: #fff;
			}
		/* 	li:nth-child(odd){
			    background: #5077aa;
			}
			li:nth-child(even){
			    background: #fb6b06;
			} */
		</style>

	</head>

	<body>
		<div id="container">
		<div class="notice-list3">
			<ul class="notice-list1">
				<li>
					<a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a>
				</li>
				<li>
					<a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a>
				</li>
				<li>
					<a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a>
				</li>
				<li>
					<a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a>
				</li>
				<li>
					<a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a>
				</li>
				<li>
					<a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a>
				</li>
				<li>
					<a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a>
				</li>
			</ul>
			<ul class="notice-list2">

			</ul>
		</div>
		</div>

		<script type="text/javascript">
			var list1 = $('.notice-list1'); //在这里轮播内容
			var list2 = $('.notice-list2'); //顶上去
			var list3 = $('.notice-list3'); //在这里显示

			//复制内容
			list2.html(list1.html());

			//循环
			$(function() {
				//定义定时器
				var timer = setInterval(time, 100);

				function time() {
					
					if (Math.abs(parseInt(list3.css('top'))) >= list1.height()) {
						
						list3.css('top', '0px')
					} else {
						
						var top = list3.css('top');
						list3.css('top', parseInt(top) - 10);
					}
				}

			//鼠标移除事件
			$('.notice-list3').mouseover(function(){
				clearInterval(timer);
			}).mouseout(function(){
				timer=setInterval(time,100);
			})
			})
			
			//以下是简单切割循环
			// $(function(){
			// 	function timer(){

			// 		$('ul').append('<li>'+$('ul>li:eq(0)').html()+'</li>');

			// 		$('ul>li:eq(0)').remove();
			// 	}
			// 	setInterval(timer,1000)
			// })
		</script>

	</body>

</html>
^Truth
Published 108 original articles · won praise 46 · views 30000 +
Private letter concerns
Seamless seen cases of carousel

Guess you like
