jQuery实例之实现滚动广告的功能

最新推荐文章于 2023-12-08 15:24:23 发布

我可不是小流氓

最新推荐文章于 2023-12-08 15:24:23 发布

阅读量1.6k

点赞数

分类专栏： jquery+ajax 文章标签： jquery

本文链接：https://blog.csdn.net/u014610047/article/details/50592478

版权

jquery+ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery 滚动广告功能的实现

<html>
<head>
<title>demo.html</title>
<script src="jquery.js"></script>
<style>
* {
  padding: 0;
  margin: 0;
}
body {
  margin: 50px;
}
ul {
  line-style-type: none;
}
li {
  height: 30px;
  line-height: 30px;
}
</style>
</head>
<body>
  <ul>
    <li>我是第1条广告---</li>
    <li>我是第2条广告---</li>
    <li>我是第3条广告---</li>
    <li>我是第4条广告---</li>
    <li>我是第5条广告---</li>
    <li>我是第6条广告---</li>
    <li>我是第7条广告---</li>
    <li>我是第8条广告---</li>
    <li>我是第9条广告---</li>
    <li>我是第10条广告---</li>
  </ul>
  <script>
    setInterval(function(){
      var newLi = $('ul>:first').clone(true);
      $('ul').append(newLi);
      $('ul>:first').remove();
    },2000);//每2秒滚动一次
  </script>
</body>
</html>