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

IE8 chrome中table隔行换色解决办法

Jul 09 Javascript

基于Jquery 解决Ajax请求的页面浏览器后退前进功能，页面刷新功能实效问题

Dec 11 Javascript

jQuery判断元素上是否绑定了指定事件的方法

Mar 17 Javascript

JS+CSS实现下拉列表框美化效果（3款）

Aug 15 Javascript

js HTML5 Canvas绘制转盘抽奖

Sep 13 Javascript

JS前端开发判断是否是手机端并跳转操作（小结）

Feb 05 Javascript

关于Node.js中Buffer的一些你可能不知道的用法

Mar 28 Javascript

JavaScript实现各种排序的代码详解

Aug 28 Javascript

JS使用Prim算法和Kruskal算法实现最小生成树

Jan 17 Javascript

vue中使用vue-cli接入融云实现即时通信

Apr 19 Javascript

layui实现给某一列加点击事件

Oct 26 Javascript

Vue 401配合Vuex防止多次弹框的案例

Nov 11 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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码

2010/05/15 PHP

php使用socket post数据到其它web服务器的方法

2015/06/02 PHP

jQuery下通过replace字符串替换实现大小图片切换

2012/05/22 Javascript

window.open不被拦截的实现代码

2012/08/22 Javascript

JavaScript 里的类数组对象

2015/04/08 Javascript

nodejs实现HTTPS发起POST请求

2015/04/23 NodeJs

jquery实现二级导航下拉菜单效果

2015/12/18 Javascript

Select下拉框模糊查询功能实现代码

2016/07/22 Javascript

浅谈Vue响应式(数组变异方法)

2018/05/07 Javascript

vue如何在自定义组件中使用v-model

2018/05/14 Javascript

理顺8个版本vue的区别(小结)

2018/09/17 Javascript

一个小时快速搭建微信小程序的方法步骤

2019/04/15 Javascript

超详细的5个Shell脚本实例分享(值得收藏)

2019/08/15 Javascript

Jquery如何使用animation动画效果改变背景色的代码

2020/07/20 jQuery

小程序实现列表倒计时功能

2021/01/29 Javascript

Python中用psycopg2模块操作PostgreSQL方法

2017/11/28 Python

python 从文件夹抽取图片另存的方法

2018/12/04 Python

使用python实现离散时间傅里叶变换的方法

2019/09/02 Python

解决django model修改添加字段报错的问题

2019/11/18 Python

阿里巴巴国际站：Alibaba.com

2016/07/21 全球购物

阿迪达斯荷兰官方网站：adidas荷兰

2018/03/16 全球购物

宝拉珍选英国官网：Paula’s Choice英国

2019/05/29 全球购物

什么是组件架构

2016/05/15 面试题

党委书记岗位职责

2013/11/24 职场文书

大学毕业生的自我鉴定

2013/11/30 职场文书

工商企业管理实习自我鉴定

2013/12/04 职场文书

空乘英文求职信

2014/04/13 职场文书

党员政治学习材料

2014/05/14 职场文书

本科毕业生自荐信

2014/06/02 职场文书

销售竞赛活动方案

2014/08/23 职场文书

奉献家乡演讲稿

2014/09/13 职场文书

2014全年工作总结

2014/11/27 职场文书

毕业生班级鉴定评语

2015/01/04 职场文书

建筑工程材料员岗位职责

2015/04/11 职场文书

Nginx防盗链与服务优化配置的全过程

2022/01/18 Servers

Mybatis-Plus 使用 @TableField 自动填充日期

2022/04/26 Java/Android