效果图如下：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
#imgMove{ height:205px; width:624px; border:#000 1px solid; position:relative; margin:200px auto;overflow:hidden;}
#imgMove ul{ height:205px;position:absolute; left:0; overflow:hidden;}
#imgMove li{ list-style:none; float:left; height:205px; width:156px; margin:0;}
a img,img{ border:none;}
span{ z-index:999;height:68px; width:68px; display:none;position:absolute; cursor:pointer;}
#moveLeft{left:0; top:68px; }
#moveRight{right:-10px; top:68px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('imgMove');
var oUl=oDiv.getElementsByTagName('ul')[0];
var oli=oUl.getElementsByTagName('li');
var liSpeed=1;
var ospan=oDiv.getElementsByTagName('span');
var rightmove=document.getElementById('moveRight');
    var leftmove=document.getElementById('moveLeft');

function show(){
ospan[0].style.display="block";
ospan[1].style.display="block";
}
oUl.onmouseover=function (){
show();
}
oUl.onmouseout=function(){
ospan[0].style.display="none";
ospan[1].style.display="none";
}
ospan[0].onmouseover=function(){
liSpeed=1;
        show();/*加这个函数是为了去除向左向右的图片闪动*/
}
ospan[1].onmouseover=function(){
   liSpeed=-1;
        show();/*加这个函数是为了去除向左向右的图片闪动*/
}

oUl.style.width=oli[0].offsetWidth*oli.length+'px';;
setInterval(function(){
oUl.style.left=oUl.offsetLeft-liSpeed+'px';
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}
else if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
},30)
}
</script>
</head>

<body>
<div id="imgMove">

<ul>
   <li><a href="#"><img src="data:images/1.png" /></a></li>
   <li><a href="#"><img src="data:images/2.png" /></a></li>
   <li><a href="#"><img src="data:images/3.png" /></a></li>
   <li><a href="#"><img src="data:images/4.png" /></a></li>
   <li><a href="#"><img src="data:images/1.png" /></a></li>
   <li><a href="#"><img src="data:images/2.png" /></a></li>
   <li><a href="#"><img src="data:images/3.png" /></a></li>
   <li><a href="#"><img src="data:images/4.png" /></a></li>
 </ul>
<span id="moveLeft"><img src="data:images/left.png" /></span>
<span id="moveRight"><img src="data:images/right.png" /></div>
</div>
</body>
</html>

javascript实现的可改变滚动方向的无缝滚动的更多相关文章

  1. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  2. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  3. js判断鼠标滑轮滚动方向并根据滚动的方向触发不同的事件

    <script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDel ...

  4. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  5. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  6. Javascript学习之无缝滚动

    无缝滚动Javascript: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  7. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  8. Javascript 学习笔记 无缝滚动

    效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 <style type="text/css"> * { margin:; padding ...

  9. javascript小例子：實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

随机推荐

  1. Java中的位运算符、移位运算

    一.位运算 Java中有4个位运算,它们的运算规则如下: (1)按位与 (&)  :两位全为1,结果为1,否则为0: (2)按位或  (|)   :两位有一个为1,结果为1,否则为0: (3) ...

  2. Jquery 中each循环嵌套的使用示例教程

    1.从MVC返回的Json数据如下: 2.下面是客户端实现的示例: $.post("/admin/GetPermissionsForRole", function (data,st ...

  3. scrapy新浪天气

    一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到桌面上的程序: LX终端(LXTermin ...

  4. [置顶] CF 86D Powerful array 分块算法入门，n*sqrt(n)

    简介:分块算法主要是把区间划分成sqrt(n)块,从而降低暴力的复杂度, 其实这算是一种优化的暴力吧,复杂度O(n*sqrt(n)) 题意:给定一个数列:a[i]    (1<= i <= ...

  5. load data 方式导入的数据不可以用binlog日志进行恢复，因为binlog里面不产生insert sql语句。

    QQ群里面有人问起这个问题:    用load data 导入数据的时候,在binlog文件中记录的不是insert 语句,这样的话,如果用load data 导入数据,当需要恢复数据库的时候  bi ...

  6. Linux - 输入输出流程序 代码(C)

    输入输出流程序 代码(C) 本文地址:http://blog.csdn.net/caroline_wendy 使用输入输出流,控制文件流. STDIN_FILENO,STDOUT_FILENO代表标准 ...

  7. Java8 Lamdba表达式 001

    在一个已经存在的编程语言里非常少有对现有的生态系统起重大影响的新特性.Lambda表达式对于Java语言就是这样的意义的存在.简单来说,Lambda表达式提供了便利的方式去创建一个匿名的功能.提供了一 ...

  8. How to install vim on linux

    前几日了解到 vim 文本编辑器,据说很强大,使用起来效率很高,今天怀着很好奇的心理,学习了一下vim编辑器的下载安装方法,在此详细介绍一下安装vim编辑器的几种常用方法: 第一种方法就是在 Ubun ...

  9. perl $d = encode_utf8($r); $f = decode_json($d)

    [root@dr-mysql01 ~]# cat a1.pl my $url="http://192.168.32.101:3000/api/getcode?env=zj&phone ...

  10. Java返回类型泛型的用法小结

    Java返回类型泛型的用法小结 版权声明:本文为博主原创文章,未经博主允许不得转载. 关于Java泛型的基本用法就不多说了,主要是一个编译期的检查,也避免了我们代码中的强制转换,比较经典的用法有泛型D ...