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

JQuery的Alert消息框插件使用介绍

Oct 09 Javascript

jquery $.ajax相关用法分享

Mar 16 Javascript

Flex通过JS获取客户端IP和计算机名的实例代码

Nov 21 Javascript

jquery调取json数据实现省市级联的方法

Jan 29 Javascript

javascript生成img标签的3种实现方法(对象、方法、html)

Dec 25 Javascript

JavaScript浏览器对象之一Window对象详解

Jun 03 Javascript

深入浅析JavaScript中的Function类型

Jul 09 Javascript

JavaScript中的Reflect对象详解(ES6新特性)

Jul 22 Javascript

理解AngularJs篇：30分钟快速掌握AngularJs

Dec 23 Javascript

Angular2.js实现表单验证详解

Jun 23 Javascript

jQuery+SpringMVC中的复选框选择与传值实例

Jan 08 jQuery

微信小程序蓝牙连接小票打印机实例代码详解

Jun 03 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

上传多个文件的PHP脚本

2006/11/26 PHP

Dedecms V3.1 生成HTML速度的优化办法

2007/03/18 PHP

php zlib压缩和解压缩swf文件的代码

2008/12/30 PHP

PHP下对数组进行排序的函数

2010/08/08 PHP

精心挑选的15个jQuery下拉菜单制作教程

2012/06/15 Javascript

不使用XMLHttpRequest实现异步加载 Iframe和script

2012/10/29 Javascript

jquery内置验证(validate)使用方法示例(表单验证)

2013/12/04 Javascript

js获取当前页面路径示例讲解

2014/01/08 Javascript

jQuery 获取、设置HTML或TEXT内容的两种方法

2014/05/23 Javascript

js实现鼠标感应向下滑动隐藏菜单的方法

2015/02/20 Javascript

解决jquery中动态新增的元素节点无法触发事件问题的两种方法

2015/10/30 Javascript

JavaScript的代码编写格式规范指南

2015/12/07 Javascript

教你一步步用jQyery实现轮播器

2016/12/18 Javascript

详解Vue.js动态绑定class

2016/12/20 Javascript

JS中promise化微信小程序api

2018/04/12 Javascript

微信小程序转化为uni-app项目的方法示例

2020/05/22 Javascript

python目录与文件名操作例子

2016/08/28 Python

在Linux命令行终端中使用python的简单方法(推荐)

2017/01/23 Python

python使用生成器实现可迭代对象

2018/03/20 Python

Windows下安装Django框架的方法简明教程

2018/03/28 Python

python3 面向对象__类的内置属性与方法的实例代码

2018/11/09 Python

使用python opencv对目录下图片进行去重的方法

2019/01/12 Python

python绘制已知点的坐标的直线实例

2019/07/04 Python

Python 利用高德地图api实现经纬度与地址的批量转换

2019/08/14 Python

使用Python给头像戴上圣诞帽的图像操作过程解析

2019/09/20 Python

Python csv文件记录流程代码解析

2020/07/16 Python

Python连接mysql数据库及简单增删改查操作示例代码

2020/08/03 Python

Python3如何在服务器打印资产信息

2020/08/27 Python

Pycharm制作搞怪弹窗的实现代码

2021/02/19 Python

阿玛尼意大利官网：Armani意大利

2018/10/30 全球购物

傲盾软件面试题

2015/08/17 面试题

平面设计师工作职责范文

2013/12/03 职场文书

乡镇消防工作实施方案

2014/03/27 职场文书

护士感人事迹

2014/05/01 职场文书

教师党员公开承诺事项

2014/05/28 职场文书

读群众路线的心得体会

2014/09/03 职场文书