<!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>
无缝轮播案列
猜你喜欢
转载自blog.csdn.net/qq_44739706/article/details/103626454
今日推荐
周排行