编程 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程序设计有所帮助。

- Author -

Tomener

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

Javascript 相关文章推荐

js getBoundingClientRect() 来获取页面元素的位置

Nov 25 Javascript

javascript jq 弹出层实例

Aug 25 Javascript

JS实现超过长度限制后自动跳转下一款文本框的方法

Feb 23 Javascript

JS实现控制表格行内容垂直对齐的方法

Mar 30 Javascript

BootStrap tab选项卡使用小结

Aug 09 Javascript

概述如何实现一个简单的浏览器端js模块加载器

Dec 07 Javascript

JS实现页面打印（整体、局部）

Aug 18 Javascript

JS使用tofixed与round处理数据四舍五入的区别

Oct 25 Javascript

layui实现动态和静态分页

Apr 28 Javascript

jQuery实现的简单手风琴效果示例

Aug 29 jQuery

微信小程序自定义弹出层效果

May 26 Javascript

vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)

Mar 01 Vue.js

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

You might like

深入解析php之apc

2013/05/15 PHP

php数组随机排序实现方法

2015/06/13 PHP

PHP数字前补0的自带函数sprintf 和number_format的用法(详解)

2017/02/06 PHP

在Laravel中实现使用AJAX动态刷新部分页面

2019/10/15 PHP

AppBaseJs 类库网上常用的javascript函数及其他js类库写的

2010/03/04 Javascript

js鼠标左右键键盘值小结

2010/06/11 Javascript

无缝滚动js代码通俗易懂(自写)

2013/06/19 Javascript

extjs 时间范围选择自动判断的实现代码

2014/06/24 Javascript

JS和JQ的event对象区别分析

2014/11/24 Javascript

javascript弹出页面回传值的方法

2015/01/28 Javascript

angularJS提交表单（form）

2015/02/09 Javascript

Javascript中的作用域和上下文深入理解

2015/07/03 Javascript

JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

2016/05/21 Javascript

jquery select2的使用心得(推荐)

2016/12/04 Javascript

js实现的在线调色板功能完整实例

2016/12/21 Javascript

nodeJS删除文件方法示例

2016/12/25 NodeJs

详解EasyUi控件中的Datagrid

2017/08/23 Javascript

Angular使用cli生成自定义文件、组件的方法

2018/09/04 Javascript

详解vue 动态加载并注册组件且通过 render动态创建该组件

2019/05/30 Javascript

[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

django输出html内容的实例

2018/05/27 Python

Python基础之变量基本用法与进阶详解

2020/01/03 Python

Django更新models数据库结构步骤

2020/04/01 Python

使用CSS3来制作消息提醒框

2015/07/12 HTML / CSS

Under Armour安德玛中国官网：美国高端运动科技品牌

2018/03/09 全球购物

外语系毕业生自荐信范文

2013/12/16 职场文书

竞选学生会主席演讲稿

2014/04/24 职场文书

家长评语怎么写

2014/12/30 职场文书

2015年先进个人自荐书

2015/03/24 职场文书

拾金不昧表扬稿大全

2015/05/05 职场文书

2016年会领导致辞稿

2015/07/29 职场文书

施工安全责任协议书

2016/03/23 职场文书

基于Python的EasyGUI学习实践

2021/05/07 Python

python自动化测试通过日志3分钟定位bug

2021/11/20 Python

Java9新特性之Module模块化编程示例演绎

2022/03/16 Java/Android

css之clearfix的用法深入理解(必看篇)

2023/05/21 HTML / CSS