javascript实现图片滚动
闲来无事捣鼓了一个原来的js图片滚动
首先看看 静态页的结构:
<body>
<a href="javascript: le()">向左</a>
<a href="javascript: re()">向右</a>
<div id="img">
<ul id="imgul">
<li><img src="img/1.jpg" height="150" width="200"/></li>
<li><img src="img/2.jpg" height="150" width="200" /></li>
<li><img src="img/3.jpg" height="150" width="200"/></li>
<li><img src="img/4.jpg" height="150" width="200"/></li>
</ul>
</div>
</body>
上面两个a标签 是控制图片滚动的走向
关键是div ul li <img> 的结构 div里面是ul 人后是li 里面是图片img 标签
让li 有浮动 然后给 div 加一个左右外边距自动 在给 div 一个相对定位 ul一个绝对定位
大体的布局就差不多了
滚动的大体思路就是,通过css定位和js定时器 改变ul 的left 属性 来实现滚动。
下面就是js代码:
<!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">
*{
padding:0px;
margin:0px;
} li{
height:150px;
width:200px;
float:left;
margin:10px;
} ul{
width:880px;
height:170px;
list-style-type: none;
background-color:#FFF;
position:absolute;
left:0;
top:0; } div{
width:880px;
height:170px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
background-color:#FF0000;
position:relative;
overflow:hidden;
} </style>
<script>
var f=-1;//新建一个全局变量
function le()//点击向左调用的方法
{
f=-1;
}
function re()//点击向右调用的方法
{
f=1;
}
window.onload=function (){
odiv=document.getElementById('div');//获取div
oul=document.getElementById('ul');//获取ul
oul.innerHTML=oul.innerHTML+oul.innerHTML; //复制一份ul 里的内容
oul.style.width=oul.offsetWidth*2+'px';//应为ul 里的内容比原来多了一倍所以宽也要比原来多一倍 //实现图片滚动的函数
function cc (){
//判断图片滚动的位置 向左时的情况
if(oul.offsetLeft<-oul.offsetWidth/2)
{
oul.style.left=0+'px';
} //判断图片滚动的位置 向右时的情况
if(oul.offsetLeft>0)
{
oul.style.left=-oul.offsetWidth/2+'px';
}
//f为 上面的全局变量 为 正则是向右 为负则是向左
oul.style.left=oul.offsetLeft+f+'px';
}
//定时器
var time=setInterval(cc,10);
//鼠标移动到div上时 停止定时器
odiv.onmouseover=function (){
clearInterval(time); };
//鼠标移出div时 在次运行定时器
odiv.onmouseout=function (){
time=setInterval(cc,10); }; };
</script>
</head> <body>
<a href="javascript: le()">向左</a>
<a href="javascript: re()">向右</a>
<div id="div">
<ul id="ul">
<li><img src="img/1.jpg" height="150" width="200"/></li>
<li><img src="img/2.jpg" height="150" width="200" /></li>
<li><img src="img/3.jpg" height="150" width="200"/></li>
<li><img src="img/4.jpg" height="150" width="200"/></li>
</ul>
</div>
</body>
</html>
大家如果有什么建议可以提出来!!谢谢!!
javascript实现图片滚动的更多相关文章
- javaScript实现图片滚动及一个普通图片轮播的代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript之图片滚动
向上滚动: <!doctype html> <title>javascript无缝滚动</title> <meta charset="utf-8&q ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- 基于javascript实现图片懒加载(亲测有效)
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 关于javascript延迟加载图片
今天在技术群中,有位童鞋问起了javascript延迟加载图片的问题,我在这就给大家说明下原理和实现方法. 延迟加载是通过自定义属性,把真实的img地址存到自定义属性中,如data-url=”img” ...
- jquery图片滚动
注:代码来自17sucai网,已去除部分冗余代码,只保留图片效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
随机推荐
- php课程---练习(发布新闻)
做一个发布新闻的页面,实现发布新闻,查看新闻,修改新闻与删除等功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- JSP Standard Tag Library JSP标准标签库
了解了基本的标签的底层实现,可以看系统定义的强大的标准标签 1.首先引入两个jar包 2.基本语法 <%@ taglib prefix="c" uri="http: ...
- Windows2003中IIS的安全设置技巧
在Windows Server 2003中对于IIS的安全设置具有十分重要的意义,所以掌握IIS安全设置的六大技巧是一个网管员必备的基本技能.下面就是对IIS的安全设置的六大技巧. 技巧1.安装系统补 ...
- UFS
● UFS vs eMMC 1. UFS有分离的读写通道,可以同时进行读写操作(双向),但是eMMC在同一时刻只能读或写. 2. UFS有一个命令队列,将命令进行排序.因此,多个命令可以同时处理,从而 ...
- 新安装个Myeclipse,导入以前做的程序后程序里好多错,提示The import java.util cannot be resolved
原因:这是由于你的项目buildpath不对原来的项目,比如采用了原先的MyEclipse自带的jdk (D:\myeclipse\XXXXXX)结果,你现在换了一个,原来的没了就导致了现在这种错误, ...
- scala基础语法(变量,数据类型,函数)
一:常量与变量 1.常量 2.两种变量定义方式(严格与不严格) 3.Float注意点 3.注意点 变量名后加上: 类型首字母是大写 4.占位符_ 但是需要制定类型 5.scala数据类型 6.其他类型 ...
- 使用paramiko模块远程登录并上传或下载文件
1.paramiko安装 1)安装PyCrypto2.6 for Python 2.7 64bit.地址:http://www.voidspace.org.uk/python/modules.shtm ...
- DuiLib学习笔记4——布局
有了前面三篇的基础,现在可以开始布局了. 首先任何布局都必须包含在<Window></Window>标签内,跟<html></html>很像. DuiL ...
- @Override的作用
@Override是伪代码,表示重写(不写也可以,但是有些IDE会报warning),不过写上有如下好处: 1.可以当注释用,方便阅读:2.编译器可以给你验证@Override下面的方法名是否是你父类 ...
- 关于缓存中Cookie,Session,Cache的使用
文章来源:http://canann.iteye.com/blog/1941173 以前实现数据的缓存有很多种方法,有客户端的Cookie,有服务器端的Session和Application. 其中C ...