html中让图片显示3秒后自动消失了,HTML-列表无缝滚动效果2（显示一个暂停3秒，滚走显示下一个）...

HTML:

• 1好消息！好消息！本店所有商品全部白送1
• 2好消息！好消息！本店所有商品全部白送2
• 3好消息！好消息！本店所有商品全部白送3
• 4好消息！好消息！本店所有商品全部白送4
• 5好消息！好消息！本店所有商品全部白送5
• 6好消息！好消息！本店所有商品全部白送6
• 7好消息！好消息！本店所有商品全部白送7
• 8好消息！好消息！本店所有商品全部白送8

CSS：

* {

margin:0;

padding:0;

}

.scroll-box {

width:400px;

height:40px;

border:2px solid #000;

margin:20px auto;

overflow:hidden;

}

.scroll-box ul {

list-style:none;

width:100%;

height:100%;

}

.scroll-box ul li {

width:100%;

height:40px;

box-sizing:border-box;

line-height:40px;

text-align:center;

}

JAVASCRIPT:

$(function() {

//获得当前

var $uList = $(".scroll-box ul");

var timer = null;

//触摸清空定时器

$uList.hover(function() {

clearInterval(timer);

},

function() { //离开启动定时器

timer = setInterval(function() {

scrollList($uList);

},

3000);

}).trigger("mouseleave"); //自动触发触摸事件

//滚动动画

function scrollList(obj) {

//获得当前

的高度

var scrollHeight = $("ul li:first").height();

//滚动出一个

的高度

$uList.stop().animate({

marginTop: -scrollHeight

},

600,

function() {

//动画结束后，将当前

• marginTop置为初始值0状态，再将第一个
• 拼接到末尾。

  $uList.css({

  marginTop: 0

  }).find("li:first").appendTo($uList);

  });

  }

  });