首页
所有分类
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 相关文章推荐
js对象与打印对象分析比较
Apr 23 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
从零开始学习Node.js系列教程四：多页面实现的数学运算示例
Apr 13 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
vue的token刷新处理的方法
Jul 17 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
JS继承实现方法及优缺点详解
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) AM(1) 电路(15) ICF-2010(1) 音箱(1) 探测器(1) 发烧友(1) 原理(1) 耳机(1) 春雷3P7(1)
You might like
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
python检查指定文件是否存在的方法
2015/07/06 Python
Python文件读写常见用法总结
2019/02/22 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
链表面试题-一个链表的结点结构
2015/05/04 面试题
Linux机考试题
2015/07/17 面试题
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
早读课迟到检讨书
2014/09/25 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
改造DE1103三步曲
2022/04/07 无线电
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript