编程 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 相关文章推荐

在JavaScript中，为什么要尽可能使用局部变量？

Apr 06 Javascript

jquery ui resizable bug解决方法

Oct 26 Javascript

15个款优秀的 jQuery 图片特效插件推荐

Nov 21 Javascript

两个数组去重的JS代码

Dec 04 Javascript

基于Jquery实现仿百度百科右侧导航代码附源码下载

Nov 27 Javascript

AngularJS 基础ng-class-even指令用法

Aug 01 Javascript

Vue.js创建Calendar日历效果

Nov 03 Javascript

BootStrap表单宽度设置方法

Mar 10 Javascript

js制作简单的音乐播放器的示例代码

Aug 28 Javascript

vue--点击当前增加class,其他删除class的方法

Sep 15 Javascript

Vue中 key keep-alive的实现原理

Sep 18 Javascript

vue 导航内容设置选中状态样式的例子

Nov 01 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

You might like

《心理测量者3》剧场版动画预告

2020/03/02 日漫

php数组添加元素方法小结

2014/12/20 PHP

php获取访问者IP地址汇总

2015/04/24 PHP

php实现比较全的数据库操作类

2015/06/18 PHP

Yii框架中jquery表单验证插件用法示例

2016/10/18 PHP

关于Javascript模块化和命名空间管理的问题说明

2010/12/06 Javascript

JavaScript根据数据生成百分比图和柱状图的实例代码

2013/07/14 Javascript

JS获取各种宽度、高度的简单介绍

2014/12/19 Javascript

Javascript基础教程之数据类型（数值 Number）

2015/01/18 Javascript

浅谈JavaScript中的Math.atan()方法的使用

2015/06/14 Javascript

JavaScript计算某一天是星期几的方法

2015/08/05 Javascript

IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题

2015/08/21 Javascript

利用Jquery实现几款漂亮实用的时间轴(附示例代码)

2017/02/15 Javascript

详解本地Node.js服务器作为api服务器的解决办法

2017/02/28 Javascript

JS中的作用域链

2017/03/01 Javascript

Vue.js实现微信过渡动画左右切换效果

2017/06/13 Javascript

vue cli 3.x 项目部署到 github pages的方法

2019/04/17 Javascript

Vue.js数字输入框组件使用方法详解

2019/10/19 Javascript

详谈Python2.6和Python3.0中对除法操作的异同

2017/04/28 Python

浅谈Python2获取中文文件名的编码问题

2018/01/09 Python

python构建深度神经网络（DNN）

2018/03/10 Python

Python 取numpy数组的某几行某几列方法

2019/10/24 Python

Python for循环及基础用法详解

2019/11/08 Python

Python虚拟环境的创建和包下载过程分析

2020/06/19 Python

FOREO官方网站：LUNA露娜洁面仪

2016/11/28 全球购物

公司新年寄语

2014/04/04 职场文书

应用心理学专业求职信

2014/08/04 职场文书

2014迎接教师节演讲稿

2014/09/10 职场文书

群众路线教育实践活动思想汇报（2014特荐篇）

2014/09/16 职场文书

2014年项目经理工作总结

2014/11/24 职场文书

2015年新教师工作总结

2015/04/28 职场文书

无保留意见审计报告

2015/06/05 职场文书

就业证明函

2015/06/17 职场文书

《狼牙山五壮士》教学反思

2016/02/17 职场文书

mysql部分操作

2021/04/05 MySQL

使用python如何删除同一文件夹下相似的图片

2021/05/07 Python