无缝滚动:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style type="text/css">
body,ul,li{
margin:0;
padding:0;
}
ul{list-style: none;}
.slide{
width:500px;
height:100px;
border:1px solid #ddd;
margin:20px auto 0;
position: relative;
overflow:hidden;
} .slide ul{
position: absolute;
width:1000px;
height:100px;
left:0;
top:0;
}
.slide ul li{
width:90px;
height:90px;
margin:5px;
background-color: antiquewhite;
line-height: 90px;
text-align:center;
font-size:30px;
float:left;
} .btns{
width:500px;
height:50px;
margin:10px auto 0;
} </style>
<script type="text/javascript"> $(function () {
var $ul = $('#slide ul');
var left = 0;
var speed = 2; $ul.html($ul.html()+$ul.html()); var move = function () {
left-=speed;
if(left<-500){
left = 0;
}
if(left>0){
left = -500;
}
$ul.css({left:left});
}; var timer = setInterval(move,30); $('#btn1').click(function () {
speed = 2;
});
$('#btn2').click(function () {
speed = -2;
});
$('#slide').mouseover(function () {
clearInterval(timer);
});
$('#slide').mouseout(function () {
timer = setInterval(move,30);
})
}) </script>
</head>
<body>
<div class="btns">
<input type="button" name="" value="向左" id="btn1">
<input type="button" name="" value="向右" id="btn2">
</div>
<div class="slide" id="slide">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</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. CSS之EM相对单位

    之前以为em单位只是在font-size中起到继承作用, 后来慢慢觉得,继承,应该是在几乎所有样式中都可以是实现的,比如height,width,border... 今天才简单测试了下,果真是可以实现 ...

  2. RPM包及其管理 rpm命令

    一.什么是RPMRPM:RedHat Package Manager     //红帽包管理如果Linux发行版本是redhat .redflag .centos .fedora .suse等或者衍生 ...

  3. web攻击之七:常见CDN回源问题总结

    1. URL链接出现非法链接 (如 */./Play/show/id/349281 ); 2. CDN接收未知Referer处理失效(目前搜索引擎的状态码为499); 3. CDN抓取服务器 Cach ...

  4. JavaScript跳转和打开新窗口

    跳转: window.location.href = "www.baidu.com"  // 跳转到百度首页,不打开新的浏览器窗口 等价于html中的<a href=&quo ...

  5. Java 决策制定

    有两种类型的决策在Java中的语句,它们分别是: if 语句 switch 语句 if 语句: if语句由一个布尔表达式后跟一个或多个语句. 语法: if语句的语法是: if(Boolean_expr ...

  6. C笔试题(二)

    /* 现在有一个数组 我们可以定义数组的子数组 如 数组 1 3 4 2 5 8 7 它的子数组可以是 1 3 4 3 4 2 5 等等 请写一个算法 找一个子数组 这个子数组递增不减少 并且是满足递 ...

  7. [原]toString()方法的复写作用, 以及打印集合.

    java中的每个类的根都是Object的子类. 必然有拥有了Object的所有方法. 在package java.lang.Object源码中: public String toString() { ...

  8. CentOS 6.6 Oracle 安装

    阿里云服务器上要装Oracle,搞了半天才搞定. 项目阿里云用的是CentOS 6.5 X86_64 ,我本地虚拟机装的是CentOS 6.6 X86_64.不过用 cat /proc/version ...

  9. win7 32位安装 python 及Numpy、scipy、matplotlib函数包

    操作系统: win7 64位,但选择安装32位的python. 1,python下载安装 https://www.python.org/downloads/ 下载2.7版,一路下一步安装. 并在pat ...

  10. java笔记--关于线程同步(5种同步方式)

    转自:http://www.2cto.com/kf/201408/324061.html 为何要使用同步?     java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改 ...