编程 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 八进制转义字符(8进制)

Apr 08 Javascript

遍历jquery对象的代码分享

Nov 02 Javascript

JavaScript高级程序设计阅读笔记（十三） js定义类或对象

Aug 14 Javascript

JS自动缩小超出大小的图片

Oct 12 Javascript

关于jquery css的使用介绍

Apr 18 Javascript

jquery实现兼容浏览器的图片上传本地预览功能

Oct 14 Javascript

jquery获取颜色在ie和ff下的区别示例介绍

Mar 28 Javascript

ECMAScript6函数默认参数

Jun 12 Javascript

如何用JavaScript实现动态修改CSS样式表

May 20 Javascript

video.js使用改变ui过程

Mar 05 Javascript

webstorm添加*.vue文件支持

May 08 Javascript

JS前端模块化原理与实现方法详解

Mar 17 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 文件扩展名获取函数

2009/06/03 PHP

php封装的图片(缩略图)处理类完整实例

2016/10/19 PHP

php基于curl实现的股票信息查询类实例

2016/11/11 PHP

利用Laravel生成Gravatar头像地址的优雅方法

2017/12/30 PHP

Laravel多域名下字段验证的方法

2019/04/04 PHP

HTML颜色选择器实现代码

2010/11/23 Javascript

jquery遍历数组与筛选数组的方法

2013/11/05 Javascript

Javasipt:操作radio标签详解

2013/12/30 Javascript

jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动

2014/03/27 Javascript

js使用cookie记录用户名的方法

2015/11/26 Javascript

jquery获取select选中值的方法分析

2015/12/22 Javascript

聊一聊Vue.js过渡效果

2016/09/07 Javascript

ES6新数据结构Set与WeakSet用法分析

2017/03/31 Javascript

详解基于Node.js的微信JS-SDK后端接口实现代码

2017/07/15 Javascript

vue中v-for通过动态绑定class实现触发效果

2018/12/06 Javascript

webpack file-loader和url-loader的区别

2019/01/15 Javascript

使用JavaScript通过前端发送电子邮件

2020/05/22 Javascript

ant design中upload组件上传大文件,显示进度条进度的实例

2020/10/29 Javascript

基于Cesium绘制抛物弧线

2020/11/18 Javascript

Python SQLAlchemy基本操作和常用技巧（包含大量实例,非常好）

2014/05/06 Python

python变量不能以数字打头详解

2016/07/06 Python

pandas 小数位数精度的处理方法

2018/06/09 Python

python输入整条数据分割存入数组的方法

2018/11/13 Python

详解Python中的各种转义符\n\r\t

2019/07/10 Python

Python利用Scrapy框架爬取豆瓣电影示例

2020/01/17 Python

Python基于jieba, wordcloud库生成中文词云

2020/05/13 Python

Python中logging日志记录到文件及自动分割的操作代码

2020/08/05 Python

Pycharm编辑器功能之代码折叠效果的实现代码

2020/10/15 Python

html5实现多图片预览上传及点击可拖拽控件

2018/03/15 HTML / CSS

新英格兰最大的特色礼品连锁店：The Paper Store

2018/07/23 全球购物

在线购买澳大利亚设计师手拿包和奢华晚装手袋：Olga Berg

2019/03/20 全球购物

什么是makefile? 如何编写makefile?

2012/08/08 面试题

文明礼貌演讲稿

2014/05/12 职场文书

css position fixed 左右双定位的实现代码

2021/04/29 HTML / CSS

Vue实现动态查询规则生成组件

2021/05/27 Vue.js

前端实现滑动按钮AJAX与后端交互的示例代码

2022/02/24 Javascript