首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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程序设计有所帮助。

JavaScript实现简单精致的图片左右无缝滚动效果

- Author -

Tomener

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
如何提高数据访问速度
Dec 26 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
德劲(5) SONY(15) 短波(1) 电路图(1) ICF-7600(1) 电台(1) 索尼(5) PL-880(1) 天线(6) 东芝(1)
You might like
php 一元分词算法
2009/11/30 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
用php+ajax新建流程（请假、进货、出货等）
2017/06/11 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python实现购物车购物小程序
2018/04/18 Python
python实现大转盘抽奖效果
2019/01/22 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
keras 权重保存和权重载入方式
2020/05/21 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
美国成衣女装品牌：CHICO’S
2016/09/19 全球购物
找到不普通的东西：Bonanza
2016/10/20 全球购物
巴西Bo.Bô官方在线商店：经营奢侈品时尚业务
2020/03/16 全球购物
会计专业的自荐信
2013/12/12 职场文书
公司委托书范本5篇
2014/09/20 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
护理实习生带教计划
2015/01/16 职场文书
2015年导购员工作总结
2015/04/25 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis