无缝滚动：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>无缝滚动</title>
  6.     <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
  7.     <style type="text/css">
  8.         body,ul,li{
  9.             margin:0;
  10.             padding:0;
  11.         }
  12.         ul{list-style: none;}
  13.         .slide{
  14.             width:500px;
  15.             height:100px;
  16.             border:1px solid #ddd;
  17.             margin:20px auto 0;
  18.             position: relative;
  19.             overflow:hidden;
  20.         }
  21.  
  22.         .slide ul{
  23.             position: absolute;
  24.             width:1000px;
  25.             height:100px;
  26.             left:0;
  27.             top:0;
  28.         }
  29.         .slide ul li{
  30.             width:90px;
  31.             height:90px;
  32.             margin:5px;
  33.             background-color: antiquewhite;
  34.             line-height: 90px;
  35.             text-align:center;
  36.             font-size:30px;
  37.             float:left;
  38.         }
  39.  
  40.         .btns{
  41.             width:500px;
  42.             height:50px;
  43.             margin:10px auto 0;
  44.         }
  45.  
  46.     </style>
  47.     <script type="text/javascript">
  48.  
  49.         $(function () {
  50.             var $ul = $('#slide ul');
  51.             var left = 0;
  52.             var speed = 2;
  53.  
  54.             $ul.html($ul.html()+$ul.html());
  55.  
  56.             var move = function () {
  57.                 left-=speed;
  58.                 if(left<-500){
  59.                     left = 0;
  60.                 }
  61.                 if(left>0){
  62.                     left = -500;
  63.                 }
  64.                 $ul.css({left:left});
  65.             };
  66.  
  67.             var timer = setInterval(move,30);
  68.  
  69.             $('#btn1').click(function () {
  70.                 speed = 2;
  71.             });
  72.             $('#btn2').click(function () {
  73.                 speed = -2;
  74.             });
  75.             $('#slide').mouseover(function () {
  76.                 clearInterval(timer);
  77.             });
  78.             $('#slide').mouseout(function () {
  79.                 timer = setInterval(move,30);
  80.             })
  81.         })
  82.  
  83.     </script>
  84. </head>
  85. <body>
  86.     <div class="btns">
  87.         <input type="button" name="" value="向左" id="btn1">
  88.         <input type="button" name="" value="向右" id="btn2">
  89.     </div>
  90.     <div class="slide" id="slide">
  91.         <ul>
  92.             <li>1</li>
  93.             <li>2</li>
  94.             <li>3</li>
  95.             <li>4</li>
  96.             <li>5</li>
  97.         </ul>
  98.     </div>
  99. </body>
  100. </html>

效果展示：

jquery——无缝滚动的更多相关文章

  1. liMarquee – jQuery无缝滚动插件（制作跑马灯效果）

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  2. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  3. jquery 无缝滚动 jquery.kxbdmarquee

    DEMO http://code.ciaoca.com/jquery/kxbdmarquee/demo/ 官网 http://code.ciaoca.com/jquery/kxbdmarquee/ D ...

  4. jQuery无缝滚动插件

    插件代码 ;(function ($) { // jQuery marquee 插件 $.fn.marquee = function (options) { // 默认设置 var defaults ...

  5. jquery无缝滚动效果实现

    demo如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. jQuery无缝滚动向上

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

随机推荐

  1. BZOJ2212：[POI2011]Tree Rotation

    浅谈线段树合并:https://www.cnblogs.com/AKMer/p/10251001.html 题目传送门:https://lydsy.com/JudgeOnline/problem.ph ...

  2. Poj 2411 Mondriaan's Dream(压缩矩阵DP)

    一.Description Squares and rectangles fascinated the famous Dutch painter Piet Mondriaan. One night, ...

  3. Poj1207 The 3n + 1 problem(水题(数据)+陷阱)

    一.Description Problems in Computer Science are often classified as belonging to a certain class of p ...

  4. 【转】 Pro Android学习笔记（五九）：Preferences（3）：EditText和Ringtone Preference

    目录(?)[-] EditText Preferences xml文件 设备的存贮文件 Ringtone Preferences EditText Preferences xml文件 在res/xml ...

  5. yum软件包管理器

    Yum (Yellow dog Updater, Modified) 黄狗升级器是一个在 Fedora 中的字符前端软件包管理器.基于 RPM 包管理(介绍见RPM包及其管理),能够从指定的服务器自动 ...

  6. 四 Synchronized

    首先,一个问题:一个boolean成员变量,一个方法赋值,一个方法读值,多线程环境下,需要同步吗? 如果用同步的话,读也要用synchroized修饰,因为可见性的问题 需要同步,或者用volatil ...

  7. 使用root直接安装python3.5.2

    操作系统:Centos7.4 不使用pyenv管理器直接进行编译安装3.5.2版本. 下载tgz的包,如果没有安装wget,请yum -y install wget 解压python包: 将解压后的包 ...

  8. Spring MVC配置详解（3）

    一.Spring MVC环境搭建:(Spring 2.5.6 + Hibernate 3.2.0) 1. jar包引入 Spring 2.5.6:spring.jar.spring-webmvc.ja ...

  9. leetcode笔记-1 twosum

    # -*- coding: utf-8 -*- #!/bin/env python # Python2.7 nums = [2, 4, 7, 0, 12, 6] print sorted(range( ...

  10. android activity生命周期的一张经典图片

    图片来自http://blog.csdn.net/android_tutor/article/details/5772285 onpause只有弹出的窗体是Activity的时候才会触发,并非是通过焦 ...