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

json 定义

Jun 10 Javascript

关于textarea提交的内容无法换行的解决办法

Apr 09 Javascript

js动态设置鼠标事件示例代码

Oct 30 Javascript

JavaScript调用ajax获取文本文件内容实现代码

Mar 28 Javascript

用js传递value默认值的示例代码

Sep 11 Javascript

js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例

Apr 29 Javascript

AngularJS通过$sce输出html的方法

Sep 22 Javascript

用jquery快速解决IE输入框不能输入的问题

Oct 04 Javascript

基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

Oct 27 Javascript

关于webpack2和模块打包的新手指南（小结）

Aug 07 Javascript

javascript浏览器用户代理检测脚本实现方法

Oct 27 Javascript

详解Vue基于vue-quill-editor富文本编辑器使用心得

Jan 03 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下过滤HTML代码的函数

2007/12/10 PHP

关于Sphinx创建全文检索的索引介绍

2013/06/25 PHP

php 访问oracle 存储过程实例详解

2017/01/08 PHP

PHP实现的随机红包算法示例

2017/08/14 PHP

php抽象方法和普通方法的区别点总结

2019/10/13 PHP

JS实现根据出生年月计算年龄

2014/01/10 Javascript

node.js中的fs.readSync方法使用说明

2014/12/17 Javascript

jquery实现的3D旋转木马特效代码分享

2015/08/25 Javascript

ASP.NET jquery ajax传递参数的实例

2016/11/02 Javascript

JS经典正则表达式笔试题汇总

2016/12/15 Javascript

JavaScript获取tr td 的三种方式全面总结（推荐）

2017/08/15 Javascript

微信小程序登录换取token的教程

2018/05/31 Javascript

js实现橱窗展示效果

2020/01/11 Javascript

Python 多线程的实例详解

2017/09/07 Python

python下实现二叉堆以及堆排序的示例

2017/09/29 Python

Python 记录日志的灵活性和可配置性介绍

2018/02/27 Python

Centos7 Python3下安装scrapy的详细步骤

2018/03/15 Python

python儿童学游戏编程知识点总结

2019/06/03 Python

Python使用itchat 功能分析微信好友性别和位置

2019/08/05 Python

django-rest-swagger对API接口注释的方法

2019/08/29 Python

python 检查数据中是否有缺失值,删除缺失值的方式

2019/12/02 Python

Pytorch技巧:DataLoader的collate_fn参数使用详解

2020/01/08 Python

Python TestSuite生成测试报告过程解析

2020/07/23 Python

日本索尼音乐商店：Sony Music Shop

2018/07/17 全球购物

C#笔试题

2015/07/14 面试题

中职生自我鉴定范文

2013/10/03 职场文书

机械专业求职信

2014/05/25 职场文书

公司应聘自荐书

2014/06/14 职场文书

群众路线剖析材料（四风问题）

2014/10/08 职场文书

禁毒主题班会教案

2015/08/14 职场文书

2016关于军训的心得体会

2016/01/11 职场文书

听课评课活动心得体会

2016/01/15 职场文书

如何用Navicat操作MySQL

2021/05/12 MySQL

python模板入门教程之flask Jinja

2022/04/11 Python

mysql sql常用语句大全

2022/06/21 MySQL

MutationObserver在页面水印实现起到的作用详解

2022/07/07 Javascript