JS特效——图片水平滚动
具体源码如下:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="关键字1,关键字2" />
<meta name="Description" content="描述信息" />
<title>水平循环滚动</title>
<!--CSS/JS-->
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;display:block;}
#scrollBox{background: #FFF;margin:40px auto;overflow:hidden;border: 1px dashed #CCC;width: 500px;}
#scrollBox #con1,#scrollBox #con2{float:left;margin-left:10px;}
#innerdiv {float: left;width: 800%;} </style> </head>
<body>
<!--div-->
<div id="scrollBox">
<div id="innerdiv">
<div id="con1">
<a href="#"><img src="1.jpg" height="120" width="192"></a>
<a href="#"><img src="2.jpg" height="120" width="192"></a>
<a href="#"><img src="3.jpg" height="120" width="192"></a>
<a href="#"><img src="4.jpg" height="120" width="192"></a>
<a href="#"><img src="5.jpg" height="120" width="192"></a>
<a href="#"><img src="6.jpg" height="120" width="192"></a>
<a href="#"><img src="7.jpg" height="120" width="192"></a>
<a href="#"><img src="8.jpg" height="120" width="192"></a>
<a href="#"><img src="9.jpg" height="120" width="192"></a>
</div>
<div id="con2"></div>
</div>
</div>
<script type="text/javascript">
var area =document.getElementById('scrollBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML=con1.innerHTML;
area.scrollLeft=0;
function scrollUp(){
if(area.scrollLeft>=con2.offsetWidth){
area.scrollLeft=0;
}else{
area.scrollLeft+=5;
}
}
var time = 50;
var mytimer=setInterval(scrollUp,time);
area.onmouseover=function(){
clearInterval(mytimer);
}
area.onmouseout=function(){
mytimer=setInterval(scrollUp,time);
}
/*
var speed=10; //数字越大速度越慢
var tab=document.getElementById('scrollBox');
var tab1=document.getElementById('con1');
var tab2=document.getElementById('con2');
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
*/ </script>
</body> </html>
效果预览:GitHub
JS特效——图片水平滚动的更多相关文章
- [iOS] UICollectionView实现图片水平滚动
最新更新: 简单封装了一下代码,参考新文章:UICollectionView实现图片水平滚动 先简单看一下效果: 新博客:http://wossoneri.github.io 准备数据 首先先加入一些 ...
- 图片滚动js 实现图片无缝滚动
在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...
- 【demo练习三】:图片水平滚动、点击按钮变更图片动画
要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...
- JS实现图片无缝滚动特效;附addEventListener()方法、offsetLeft和offsetWidth属性。
一:html部分 <body> <input id="btn1" type="button" value="向左"> ...
- [iOS] WSHorizontalPickerView 图片水平滚动封装
之前这篇文章传送门本来是记录自己练手的demo的,后来很多人来问我要代码.今天就抽时间封装了一下,没有考虑太多情况,等我有空再去仔细考虑吧. 代码在:Github 用法很简单,创建对象,设置数据源,记 ...
- Android_ViewPager_实现多个图片水平滚动
1.示意图 2.实现分析 (1).xml配置 <!-- 配置container和pager的clipChildren=false, 并且指定margi ...
- Android ViewPager实现多个图片水平滚动
1.示意图 2.实现分析 (1).xml配置 <!-- 配置container和pager的clipChildren=false, 并且指定margi ...
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
随机推荐
- 安卓 handler解析
参考: 1.http://www.2cto.com/kf/201302/190591.html(安卓更新UI的两种方式,handler,Activity.runOnUIThread()) 2.http ...
- JSON详解(转载)
JSON详解 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如何使用JSON 在.NET中如何使用JSON 总结 JSON的全称是”JavaScript Object Notation”, ...
- 7 款华丽的 HTML5 Loading 动画特效
我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...
- AFNetWorking 之 Get/Post 请求的使用
1. Get 与 Post 比较 GET请求:简单业务.明文发送 POST请求:上传文件,重要信息.加密信息,.大数据信息. 2. 序列化 默认是JSon格式. // 请求的序列化 manager.r ...
- delphi TServerSocket的多线程
http://blog.sina.com.cn/s/blog_471218c2010001qc.html unit U_dxc; interface uses Windows, Messages, ...
- 排序问题思考(要求时间和空间复杂度尽可能的低)【Part 2】
继上篇博文,今天我将先介绍一下什么是计数排序,将计数排序描述清楚后,再进行后续的桶排序方法解决这个问题. 通常情况下,一提到排序,大家第一反应就是比较,其实,今天我要说的这个计数排序,不是基于比较的排 ...
- Intent的属性及Intent-filter配置——指定Action、Category调用系统Activity
Intent代表了启动某个程序组件的“意图”,实际上Intent对象不仅可以启动本应用内程序组件,也可启动Android系统的其他应用的程序组件,包括系统自带的程序组件——只要权限允许. 实际上And ...
- C# winform项目中ListView控件使用CheckBoxes属性实现单选功能
C# winform项目中ListView控件使用CheckBoxes属性实现单选功能 在做项目时需要使用ListView控件的CheckBoxes属性显示,还要在点击行时自动选中CheckBoxes ...
- 负载均衡软件LVS分析三(配置)
LVS集群有DR.TUN.NAT三种配置模式,可以对www服务.FTP服务.MAIL服务等做负载均衡,下面通过搭建www服务的负载均衡实例,讲述基于DR模式的LVS集群配置. 一. Director ...
- 使用 Passenger +Apache扩展 Puppet,代替其Webrick的web框架
使用 Passenger +Apache扩展 Puppet,代替其Webrick的web框架 1安装 yum install ruby-devel ruby-libs rubygems libcurl ...