jQery无缝滚动效果
思路：
赋值所有li，添加到ul末尾,重新计算ul宽度
每次移动一个固定的值，当超出一半时，将ul拉回原位
以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
ul,li{
list-style: none;
}
#box{
width: 440px;
height: 88px;
margin: 50px auto;
border: 3px solid #DCDCDC;
position: relative;
overflow: hidden;
}
#list{
position: absolute;
}
#list li{
float: left;
width: 88px;
height: 88px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//将ul的内容复制一遍添加到ul中，
$('#list').append($('#list').html());
//改变list的长度
$('#list').width($('#list li').eq(0).width() * $('#list li').length)
setInterval(move,10)
})
var x = 0; //每次移动的长度
function move(){
//判读超过ul的一半，拉回来重新开始
if(x <= -($('#list').width()/2)){
x = 0;
}
$('#list').css('left',x)
x-=1;
}
</script>
</head>
<body>
<div id="box">
<ul id="list">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
jQery无缝滚动效果的更多相关文章
- liMarquee演示12种不同的无缝滚动效果
很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 信息无缝滚动效果marquee
横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
- javascript小例子：實現四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...
- jq封装-无缝滚动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js 无缝滚动效果学习
<!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- vue实现消息的无缝滚动效果
export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军" ...
随机推荐
- stm32F4各个库文件的作用分析
system_stm32f4xx.c:This file contains the system clock configuration for STM32F4xx devices. /** **** ...
- 一键安装GitLab7
1. Install and configure the necessary dependencies If you install Postfix to send email please sele ...
- Socket小项目的一些心得（鸣谢传智的教学视频）
Socket是一种封装了四层通信的整体抽象入口,通常也称作"套接字",这是常用的四层通信这是访问Socket的流程图,这个分为客户端和服务器端,其中服务器端有以下步骤去建立,前面的 ...
- CodeForces 709A Juicer (水题， 模拟)
题意:给定 n 个桔子的大小,一个杯子的容积,一个最大限度,挨着挤桔子汁,如果大小大于限度,扔掉,如果不杯子满了倒掉,问你要倒掉多少杯. 析:直接按要求模拟就好,满了就清空杯子. 代码如下: #pra ...
- PB学习笔记（一）
前言:我绝对很痛恨PB.1.没人带2.自己摸索3.头发掉了4.老大不停的给任务5.这语言老的不行了6,代码可读性不是一般的差 我绝对很喜欢PB.1.自我学习成功后那种成就感2.老大也会帮给我看看,指点 ...
- CF 86D Powerful array 【分块算法，n*sqrt(n)】
给定一个数列:A1, A2,……,An,定义Ks为区间(l,r)中s出现的次数. t个查询,每个查询l,r,对区间内所有a[i],求sigma(K^2*a[i]) 离线+分块 将n个数分成sqrt(n ...
- springMVC+JAP整合彻底摆脱persistence.xml配置文件
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
- Eclipse 和 NetBeans 快捷键即其他常用功能比较
按: 自己用 Eclipse, 常用的也就这些功能, 在用 NetBeans 时, 有些不顺手, 因此列表如下. Eclipse和NetBeans常用快捷键对比: 功能 Eclipse N ...
- 说下Fedora下把SpiderMonkey放入Eclipse内编译的过程
首先要知道SpiderMonkey是个什么玩意 详细的可以看看这里(当然,如果你有google翻译的话看起来也一样费劲,你可以在语言那里选择中文.看完了再转回英文-因为中文有很多文档都没有的,比如:B ...
- win8下hosts保存文档失败,提示：请检查文件是否被另一个应用程序打开
选择文件,然后右键点击属性,然后进入"安全"选项卡下点击当前用户对用的用户名然后编辑权限,给予完全控制的权限. 如图: 图一: