Javascript实现 图片的无缝滚动
<!DOCTYPE html>
<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;
} #div1
{
width: 600px;
height: 419px;
position: relative;
background-color: red;
margin: 100px auto;
overflow: hidden;
} #div1 ul
{
position: absolute;
left: 0;
top: 0;
margin: auto;
} #div1 ul li
{
float: left;
width: 630px;
height: 420px;
list-style: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv1 = document.getElementById("div1");
var oUl = oDiv1.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
var speed = 2;//速度方向 oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 100 + "px"; function move() {
//左走
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
//右走
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px";
}
oUl.style.left = oUl.offsetLeft + speed + "px"; }
var timeer = setInterval(move, 30); oDiv1.onmouseover = function () {
//清除定时器
clearInterval(timeer);
}
oDiv1.onmouseout = function () {
//打开定时器
timeer = setInterval(move, 30);
} //控制左右的按钮
var aA = document.getElementsByTagName("a");
aA[0].onclick = function () {
//左侧滚动
speed =-2;
} aA[1].onclick = function () {
//右侧滚动
speed =2;
}
}
</script>
</head>
<body>
<center>
<a href="javascript:void(0);">向左走</a>
<a href="javascript:void(0);">向右走</a>
</center>
<div id="div1">
<ul>
<li>
<img src="data:images/00_00.jpg" /></li>
<li>
<img src="data:images/00_01.jpg" /></li>
<!--li>
<img src="data:images/00_02.jpg" /></!--li>
<li>
<img src="data:images/00_03.jpg" /></li-->
</ul>
</div> </body>
</html>
说明:我的图片尺寸大小是630X419:
Javascript实现 图片的无缝滚动的更多相关文章
- jquery 图片自动无缝滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- css 图片的无缝滚动
转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...
- SuperSlidev2.1 轮播图片和无缝滚动
使用方法,狠狠的点击下面链接 http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class=&q ...
- js 图片实现无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript(六)——实现图片上下或者左右无缝滚动
/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...
- js图片无缝滚动代码
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
随机推荐
- hdu 5224 Tom and paper
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5224 Tom and paper Description There is a piece of pa ...
- hdu 2579 Dating with girls(2)
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2579 Dating with girls(2) Description If you have sol ...
- Apple Watch应用开发经验谈:我遇到的那些坑
本文作者张忠良是滴答清单Apple Watch版应用的开发工程师,他用了一周的时间使用纯Objective-C语言完成了Apple Watch版滴答清单应用的开发工作.在这里,他从开发角度阐述了个人对 ...
- c/c++常用代码--udp多播
#include <stdio.h> #include <stdlib.h> #include <windows.h> #include <winsock.h ...
- EntityFramwork(1) 源地址https://msdn.microsoft.com/zh-cn/data/jj193542
1.创建应用程序 简单起见,我们将构建一个使用 Code First 执行数据访问的基本控制台应用程序. 打开 Visual Studio "文件"->"新建&qu ...
- EF4.1之贪婪加载和延迟加载
默认情况下,EF4.1是只查询到涉及到的数据对象,但是EF4.1支持两种方法进行控制其加载: 1.贪婪加载 2.延迟加载 使用的表还是上次使用的Order 和 OrderDetails两张表来举例说明 ...
- 网页设计师必备的10个CSS技巧
CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情.在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就 ...
- Kakfa
Kakfa分布式集群搭建 本位以最新版本kafka_2.11-0.10.1.0版本讲述分布式kafka集群环境的搭建过程.服务器列表: 1 2 3 172.31.10.1 172.31.10.2 17 ...
- “我爱淘”冲刺阶段Scrum站立会议4
完成任务: 完成了搜索界面的Activity的编写. 计划任务: 实现数据库的链接,用户可以查到自己需要的书籍的信息. 遇到问题: 数据库的操作,实现查询功能:
- multipart/form-data
Content-Type的类型扩充了multipart/form-data用以支持向服务器发送二进制数据