2015.7.11js-10(无缝滚动)
1.实现原理:setInterval定时器,让某元素position的left属性定时滚动,使用到js中的元素的offsetLeft属性。
2.案例:1.css的实现是外div是4张图片的总宽度,设置relative然后overflow隐藏。子代有ul层设置为absolute;left属性移动时都是移动整个ul层的。;
2.4张图片无缝滚动,再复制4张(1,2,3,4)在第4张后面,li下有4张图片,获取li的offsetWidth(),然后算出ul的总宽度,当包着4张图片的ul层的offsetLeft滚动到一半的时候,将前4张的left变成0,这样滚动的时候就会无缝滚动了。设置ul层的offsetLeft来控制滚动。
3.demo地址:http://www.alanjs.comeze.com/study/demo11setInterval.html
<script type="text/javascript">
window.onload = function(){
var slide = document.getElementById("slideImg");
var moveUl = document.getElementById("moveUl");
var aLi = slide.getElementsByTagName("li");
var timer = null;
var speed = -2;
var prev = document.getElementById("prev");
var next = document.getElementById("next"); moveUl.innerHTML = moveUl.innerHTML + moveUl.innerHTML; //先复制4张图片放在后面 moveUl.style.width = aLi[0].offsetWidth*aLi.length + "px"; //获取一个li的宽度来设置ul层的总宽度
timer = setInterval(move,30) slide.onmouseover = function(){
if(timer){
clearInterval(timer);
}
} slide.onmouseout = function(){
timer = setInterval(move,30);
} prev.onclick = function(){
speed = -2;
} next .onclick = function(){
speed = 2;
} function move(){
if(moveUl.offsetLeft < -moveUl.offsetWidth/2){ //向左滚动,当滚动到一半的时候,前面4张就跳到后面
moveUl.style.left = "0";
}
if(moveUl.offsetLeft > 0){
moveUl.style.left = -moveUl.offsetWidth/2 + "px"; //向右滚动,当一开始滚动的时候,ul的left属性大于0,后面4张就立即跳到前面
}
moveUl.style.left = moveUl.offsetLeft+speed + "px"; //设置ul层的offsetLeft来控制滚动
}
}
</script>
<style>
#wrap{width:1603px;margin:0 auto;height:300px;}
#sliderImg{width:1308px;height:203px;position:relative;overflow:hidden;border:1px solid red;}
#sliderImg ul{positin:absolute;left:0px;top:0px;}
#sliderImg ul li{list-style:none;float:left}
</style> <body>
<div id="wrap">
<div id="sliderImg">
<ul id="moveUl">
<li><a href="javascript:;"><img src="data:images/slide5.jpg" /></a></li>
<li><a href="javascript:;"><img src="data:images/slide6.jpg" /></a></li>
<li><a href="javascript:;"><img src="data:images/slide7.jpg" /></a></li>
<li><a href="javascript:;"><img src="data:images/slide8.jpg" /></a></li>
</ul>
</div>
<a id="prev" href="javascript:;">prev</a>
<a id="next" href="javascript:;">next</a>
</div>
</body>
2015.7.11js-10(无缝滚动)的更多相关文章
- js函数——倒计时模块+无缝滚动
倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- js函数——倒计时模块和无缝滚动
倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 自己写了一个无缝滚动的插件(jQuery)
效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...
- js 无缝滚动效果学习
<!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...
- liMarquee演示12种不同的无缝滚动效果
很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...
- js实现标准无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript(六)——实现图片上下或者左右无缝滚动
/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...
- scrollLeft的相关问题(js横向无缝滚动)
<div id="demo"> <div id="innerdemo"> <div id="demo1"> ...
- JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
随机推荐
- Android Studio使用技巧小记
1.Android Studio中查看genymotion模拟器中的文件的方法: Tools-->Android Device Moniter 2.快速定位开源代码某功能的实现方法 右击项目-- ...
- android app rate on google play and amazon
http://stackoverflow.com/questions/11393191/linking-back-to-amazon-app-store-for-ratings public st ...
- c语言中左移、右移中的高位需要注意
有符号数,左移可能会破坏符号位. 右移时,要注意高位符号. 0X表示十六进制.十六进制每位数值由 0-f表示.所以0XC0 对应 二进制为 11000000B10进制与16进制间关系:1 -- 0X1 ...
- PHP 免费获取手机号码归属地
一.淘宝网API API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443 参数: tel:手机号码 返回 ...
- 为什么要使用JS模板引擎
我之前在写一个输入联想控件的时候,改过好几个版本,每个版本不是因为性能不好就是因为代码凌乱而被推翻,最后用了understore模板引擎,效果有明显改善.整好这两天在研究互联网技术架构,发现很多的开发 ...
- virtio-netdev 数据包的发送
在前面几文中已经大体介绍了virtio的重要组成,包含virtio net设备的创建,vring的创建,与virtio设备的交互方式,我们就从网络数据包的发送角度来看下virtio的详细使用流程. [ ...
- Go之单元测试
go单元测试需要按照gotest的规范来编写: 1.文件名必须以xx_test.go命名 2.方法必须是Test[^a-z]开头 3.方法参数必须 t *testing.T 在运行gotest的时 ...
- AcceptEx 以及 获取远程IP与port
// 獲取本地以及遠程的IP和port setsockopt(clientfd, SOL_SOCKET, SO_UPDATE_ACCEPT_CONTEXT, (char *)&listenfd ...
- SELECT中常用的子查询操作
MySQL中的子查询 是在MySQL中经常使用到的一个操作,不仅仅是用在DQL语句中,在DDL语句.DML语句中也都会常用到子查询. 子查询的定义: 子查询是将一个查询语句嵌套在另一个查询语句中: 在 ...
- 【GIS】GDAL Python 影像裁剪
# -*- coding: utf-8 -*- """ Created on Fri Nov 30 11:45:03 2018 @author: Administrato ...