编程 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 Tips(2) 关于$()包装集你不知道的

Dec 14 Javascript

JavaScript 精粹读书笔记(1,2)

Feb 07 Javascript

关于Jqzoom的使用心得 jquery放大镜效果插件

Apr 12 Javascript

JS中的substring和substr函数的区别说明

May 07 Javascript

改变隐藏的input中value值的方法

Mar 19 Javascript

使用phantomjs进行网页抓取的实现代码

Sep 29 Javascript

js中日期的加减法

May 06 Javascript

HTML页面定时跳转方法解析（2种任选）

Dec 22 Javascript

Ionic3 UI组件之Gallery Modal详解

Jun 07 Javascript

webpack学习教程之前端性能优化总结

Dec 05 Javascript

vue项目中的webpack-dev-sever配置方法

Dec 14 Javascript

基于vue循环列表时点击跳转页面的方法

Aug 31 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删除特定数组内容并且重建数组索引的方法.

2011/03/25 PHP

深入PHP与浏览器缓存的分析

2013/06/03 PHP

PHP判断是否为空的几个函数对比

2015/04/21 PHP

php中实现用数组妩媚地生成要执行的sql语句

2015/07/10 PHP

dvwa+xampp搭建显示乱码的问题及解决方案

2015/08/23 PHP

php实现的XML操作(读取)封装类完整实例

2017/02/23 PHP

基于php流程控制语句和循环控制语句(讲解)

2017/10/23 PHP

php静态成员方法和静态的成员属性的使用方法

2017/10/26 PHP

mysqli扩展无法在PHP7下升级问题的解决

2019/09/10 PHP

来自chinaz的ajax获取评论代码

2008/05/03 Javascript

映彩衣的js随笔(js图片切换效果)

2011/07/31 Javascript

javascript时间函数基础介绍

2013/03/28 Javascript

js history对象简单实现返回和前进

2013/10/30 Javascript

jquery序列化form表单使用ajax提交后处理返回的json数据

2014/03/03 Javascript

javascript实现点击后变换按钮显示文字的方法

2015/05/13 Javascript

JavaScript中字符串拼接的基本方法

2015/07/07 Javascript

vue2.0 computed 计算list循环后累加值的实例

2018/03/07 Javascript

javascript中toFixed()四舍五入使用方法详解

2018/09/28 Javascript

JS解惑之Object中的key是有序的么

2019/05/06 Javascript

Vue实现剪贴板复制功能

2019/12/31 Javascript

python实现的一个p2p文件传输实例

2014/06/04 Python

Python数组条件过滤filter函数使用示例

2014/07/22 Python

详解Python文本操作相关模块

2017/06/22 Python

python和opencv实现抠图

2018/07/18 Python

Flask模板引擎之Jinja2语法介绍

2019/06/26 Python

Python尾递归优化实现代码及原理详解

2020/10/09 Python

澳大利亚吉他在线：Artist Guitars

2017/03/30 全球购物

英国门销售网站：Green Tree Doors

2020/01/07 全球购物

高中体育教学反思

2014/01/24 职场文书

啤酒节策划方案

2014/05/28 职场文书

销售内勤岗位职责范本

2015/04/13 职场文书

爱心捐赠活动简讯

2015/07/20 职场文书

中学教代会开幕词

2016/03/04 职场文书

python 模块重载的五种方法

2021/04/24 Python

Python实现机器学习算法的分类

2021/06/03 Python

MySQL连表查询分组去重的实现示例

2021/07/01 MySQL