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

通过MSXML2自动获取QQ个人头像及在线情况(给初学者)

Jan 22 Javascript

Javascript面向对象编程（二）构造函数的继承

Aug 28 Javascript

jQuery中slice()方法用法实例

Jan 07 Javascript

JS实现新浪微博效果带遮罩层的弹出框代码

Oct 12 Javascript

一分钟理解js闭包

May 04 Javascript

分分钟玩转Vue.js组件

Oct 25 Javascript

原生js实现addclass,removeclass,toggleclasss实例

Nov 24 Javascript

详解AngularJS 路由 resolve用法

Apr 24 Javascript

关于预加载InstantClick的问题解决方法

Sep 12 Javascript

详解vue中this.$emit()的返回值是什么

Apr 07 Javascript

使用JQuery自动完成插件Auto Complete详解

Jun 18 jQuery

vue使用video插件vue-video-player详解

Oct 23 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获取系统变量方法小结

2015/05/29 PHP

php注册和登录界面的实现案例(推荐)

2016/10/24 PHP

php和redis实现秒杀活动的流程

2019/07/17 PHP

html下载本地

2006/06/19 Javascript

犀利的js 函数集合

2009/06/11 Javascript

flash 得到自身url参数的代码

2009/11/15 Javascript

jQuery之自动完成组件的深入解析

2013/06/19 Javascript

利用JS进行图片的切换即特效展示图片

2013/12/03 Javascript

Jquery中的层次选择器与find()的区别示例介绍

2014/02/20 Javascript

浅谈jQuery中对象遍历.eq().first().last().slice()方法

2014/11/26 Javascript

JavaScript将一个数组插入到另一个数组的方法

2015/03/19 Javascript

微信小程序使用radio显示单选项功能【附源码下载】

2017/12/11 Javascript

详解JS取出两个数组中的不同或相同元素

2019/03/20 Javascript

简单实现节流函数和防抖函数过程解析

2019/10/08 Javascript

JS 设计模式之：单例模式定义与实现方法浅析

2020/05/06 Javascript

使用js和canvas实现时钟效果

2020/09/08 Javascript

解决vue scoped html样式无效的问题

2020/10/24 Javascript

[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3

2014/07/15 DOTA

[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/20 DOTA

使用python实现拉钩网上的FizzBuzzWhizz问题示例

2014/05/05 Python

详解Python中的Numpy、SciPy、MatPlotLib安装与配置

2017/11/17 Python

python中实现数组和列表读取一列的方法

2018/04/03 Python

pygame游戏之旅添加游戏暂停功能

2018/11/21 Python

详解python中sort排序使用

2019/03/23 Python

详解Python 函数如何重载？

2019/04/23 Python

Python流行ORM框架sqlalchemy安装与使用教程

2019/06/04 Python

Django models.py应用实现过程详解

2019/07/29 Python

Python扫描端口的实现

2021/01/25 Python

CSS3 倾斜的网页图片库实例教程

2009/11/14 HTML / CSS

计算机应用专业毕业生求职信

2013/10/24 职场文书

计算机专业职业规划

2014/02/28 职场文书

关爱女孩行动实施方案

2014/03/13 职场文书

2014年小学国庆节活动方案

2014/09/16 职场文书

民政局离婚协议书范本

2014/10/20 职场文书

2014年财务人员工作总结

2014/11/11 职场文书

团委工作总结2015

2015/04/02 职场文书