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

完整显示当前日期和时间的JS代码

Sep 17 Javascript

Javascript Tab 导航插件 (23个)

Jun 11 Javascript

解决遍历时Array.indexOf产生的性能问题

Jul 03 Javascript

关于JavaScript中原型继承中的一点思考

Jul 25 Javascript

javascript数组详解

Oct 22 Javascript

深入剖析JavaScript:Object类型

May 10 Javascript

JavaScript导航脚本判断当前导航

Jul 12 Javascript

angular中实现控制器之间传递参数的方式

Apr 24 Javascript

jquery 禁止鼠标右键并监听右键事件

Apr 27 jQuery

zTree树形菜单交互选项卡效果的实现方法

Dec 25 Javascript

小程序获取周围IBeacon设备的方法

Oct 31 Javascript

vue+SSM实现验证码功能

Dec 07 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

从wamp到xampp的升级之路

2015/04/08 PHP

配置eAccelerator和XCache扩展来加速PHP程序的执行

2015/12/22 PHP

php.ini中date.timezone设置详解

2016/11/20 PHP

PHP自定义函数实现数组比较功能示例

2017/10/19 PHP

浅谈php的TS和NTS的区别

2019/03/13 PHP

javascript:void(0)是什么意思示例介绍

2013/11/17 Javascript

IE中JS跳转丢失referrer问题的2个解决方法

2014/07/18 Javascript

javascript中动态函数用法实例分析

2015/05/14 Javascript

探讨：JavaScript ECAMScript5 新特性之get/set访问器

2016/05/05 Javascript

基于JavaScript实现抽奖系统

2018/01/16 Javascript

vue实现树形菜单效果

2018/03/19 Javascript

angular6.x中ngTemplateOutlet指令的使用示例

2018/08/09 Javascript

关于vue编译版本引入的问题的解决

2018/09/17 Javascript

vue.js实现图书管理功能

2019/09/24 Javascript

微信小程序8种数据通信的方式小结

2020/02/03 Javascript

Element-UI 使用el-row 分栏布局的教程

2020/10/26 Javascript

Vue+penlayers实现多边形绘制及展示

2020/12/24 Vue.js

Python的Bottle框架中获取制定cookie的教程

2015/04/24 Python

python爬虫刷访问量 2019 7月

2019/08/01 Python

Python IDE Pycharm中的快捷键列表用法

2019/08/08 Python

matplotlib quiver箭图绘制案例

2020/04/17 Python

python3.6使用SMTP协议发送邮件

2020/05/20 Python

华丽的手绘陶瓷：MacKenzie-Childs

2017/02/04 全球购物

英国最出名高街品牌：Forever Unique

2018/02/24 全球购物

英国领先的豪华时尚家居网上商店：Amara

2019/08/12 全球购物

财务会计专业求职信范文

2013/12/31 职场文书

英文导游欢迎词

2014/01/11 职场文书

面试后感谢信

2014/02/01 职场文书

优秀少先队工作者事迹材料

2014/05/13 职场文书

委托证明模板

2014/09/16 职场文书

党员评议思想汇报

2014/10/08 职场文书

个人年终总结开头

2015/03/06 职场文书

大学生英文求职信范文

2015/03/19 职场文书

2015年优质护理服务工作总结

2015/04/08 职场文书

2019入党申请书范文3篇

2019/08/21 职场文书

《分一些蚊子进来》读后感3篇

2020/01/09 职场文书