首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现简单精致的图片左右无缝滚动效果

Posted in Javascript onMarch 16, 2017

本文实例讲述了JavaScript实现简单精致的图片左右无缝滚动效果。分享给大家供大家参考，具体如下：

<!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>
</head>
<body>
<style type="text/css">
<!--
#picScroll {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 745px;}
#picScroll img {border: 3px solid #F2F2F2;}
#picSdiv {float: left;width: 800%;}
#picSdiv1 {float: left;}
#picSdiv2 {float: left;}
-->
</style>
<div id="picScroll">
  <div id="picSdiv">
    <div id="picSdiv1">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a1.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a2.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a3.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a4.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a5.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a6.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a7.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a8.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a9.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a10.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a11.jpg" border="0" width="185" height="240" /></a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a12.jpg" border="0" width="185" height="240" /></a>
    </div>
    <div id="picSdiv2"></div>
  </div>
</div>
<script>
<!--
var speed=10;
var picS=document.getElementById("picScroll");
var picS1=document.getElementById("picSdiv1");
function Marquee(){
  if(picS.scrollLeft >= picS1.offsetWidth)
    picS.scrollLeft =0;
  else{
    picS.scrollLeft++;
  }
}
var MyMar=setInterval(Marquee,speed);
picS.onmouseover=function() {clearInterval(MyMar)};
picS.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript实现简单精致的图片左右无缝滚动效果

- Author -

Tomener

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
二级域名转向类
Nov 09 Javascript
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
js获取url参数的使用扩展实例
Dec 29 Javascript
jQuery 全选效果实现代码
Mar 23 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
javascript正则表达式定义（语法）总结
Jan 08 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
js实现瀑布流效果（自动生成新的内容）
Mar 16 #Javascript
es6的数字处理的方法（5个）
Mar 16 #Javascript
Webpack打包慢问题的完美解决方法
Mar 16 #Javascript
div中文字内容溢出常见的解决方法
Mar 16 #Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 #Javascript
原生js更改css样式的两种方式
Mar 15 #Javascript
js清除浏览器缓存的几种方法
Mar 15 #Javascript
数据库卡死(1) 限流(2) update(2) 递归(1) Parser(1) tcp/ip(1) 全局锁(1) 限速(1) IP(1) 内置模块(1)
You might like
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
PHP Hash算法：Times33算法代码实例
2015/05/13 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP面向对象程序设计内置标准类，普通数据类型转为对象类型示例
2019/06/12 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
js实现计算器功能
2020/08/10 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Django框架 信号调度原理解析
2019/09/04 Python
车间班组长的职责
2013/12/13 职场文书
消防安全员岗位职责
2014/03/10 职场文书
奥利奥广告词
2014/03/20 职场文书
法人授权委托书范本
2014/04/04 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
个人欠条范本
2015/07/03 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python