- 浏览: 2333353 次
- 性别:
- 来自: 武汉
文章分类
- 全部博客 (559)
- JavaScript (55)
- windows (21)
- mysql (7)
- php (199)
- thinkphp (2)
- 互联网 (42)
- flash (3)
- html (9)
- phpcms (11)
- ffmpeg (6)
- 生活 (108)
- flash小游戏 (11)
- 软件 (35)
- css (1)
- JavaScript 二维码 (0)
- 二维码 (1)
- 桌面图标 (1)
- ping服务 (1)
- 百度 (2)
- 搜索引擎 (1)
- seo (1)
- 整形美容 (1)
- 深圳婚纱摄影 (1)
- 武汉婚纱摄影 (2)
- 淘宝 (0)
- 冬装 (0)
- 女装 (0)
- 新款冬装女装 (0)
- freebsd 操作系统 (1)
- editplus (1)
- svn (1)
- 微信 (1)
- 微商 (1)
- curl (1)
- 远程 (1)
- 防盗链 (1)
- vc2012 (1)
- Alexa (1)
- bootstrap (1)
- fileinput (1)
- webuploader (1)
- mip (1)
- 正则 (1)
最新评论
-
hexawing:
啥原理……貌似很神奇啊
excel写保护(非打开保护)的破解方法 -
化蝶自在飞:
注意upload.js的配置参数 sendAsBinary
webuploader实例php 配合fastDFS远程跨域上传回调的注意点 -
化蝶自在飞:
增加一个微信内置浏览器的useragent:
Mozilla/ ...
浏览器useragent大全 -
化蝶自在飞:
leiliang10 写道你揍是个骗纸此话怎讲?这个工具是我自 ...
mp4、mov视频元数据头信息修复工具 支持h.264编码边下边播 -
leiliang10:
你揍是个骗纸
mp4、mov视频元数据头信息修复工具 支持h.264编码边下边播
图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向,看效果就啥都明白了.
图片滚动代码,图片无缝滚动代码
以上是html代码,下面是js代码:
兼容多浏览器,目前ie系列和Firefox下正常. html里的图片和链接地址直接替换.自行调试js的滚动宽度.
提供附件,里面是一个完整的演示例子:
图片滚动代码,图片无缝滚动代码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .blk_18{width:638px; text-align:center; margin:0 auto;overflow:hidden;zoom:1; clear:both;} .blk_18 li{list-style-type:none;} .blk_18 .LeftBotton{width:18px;height:120px;float:left;background:url(mleft.gif) 0px center no-repeat;cursor:pointer;} .blk_18 .RightBotton{width:18px;height:120px;float:right;background:url(mright.gif) right center no-repeat;cursor:pointer;} .blk_18 .pcont{width:600px;height:190px;float:left;overflow:hidden;} .blk_18 .ScrCont{width:32766px;zoom:1;} .blk_18 #List1_1,.blk_18 #List1_2{float:left;} .blk_18 .pl{width:200px;float:left; text-align:center;} .blk_18 .pl img{padding:1px;margin:0 auto; border:1px #ccc solid;width:160px;height:100px;overflow:hidden;} .blk_18 .pl{line-height:20px} </style> <DIV class=blk_18> <DIV onmouseup=ISL_StopUp_1() class=LeftBotton onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1()></DIV> <DIV class=pcont id=ISL_Cont_1> <DIV class=ScrCont> <DIV id=List1_1> <li class=pl><a href="http://www.baidu.com/usedcar/6186" onmousedown=this.href=urlParamAdd(this.href)><img src="http://www.baidu.com//uploads/carimages/201009/4c84c1423c57a.jpg" alt="06款雅阁 2.4L AT舒适版" /></a> <p><a href=" http://www.baidu.com/usedcar/6186" title="06款雅阁 2.4L AT舒适版">06款雅阁 2.4L AT舒适版</a><br /> <span class="style05">所在地:武汉</span><br /> 特惠价:<span class="style05">¥11万元</span></p></li> <li class=pl><a href="http://www.baidu.com/usedcar/6161" onmousedown=this.href=urlParamAdd(this.href)><img src=" http://www.baidu.com/uploads/carimages/201008/128287636169.jpg" alt="凯越1.6 MT-LE 舒适版" /></a> <p><a href=" http://www.baidu.com/usedcar/6161" title="凯越1.6 MT-LE 舒适版">凯越1.6 MT-LE 舒适版</a><br /> <span class="style05">所在地:武汉</span><br /> 特惠价:<span class="style05">¥4.58万元</span></p></li> <li class=pl><a href="http://www.baidu.com/usedcar/6128" onmousedown=this.href=urlParamAdd(this.href)><img src=" http://www.baidu.com/uploads/carimages/201008/128203553342.jpg" alt="蒙迪欧-致胜 2.3AT时尚型" /></a> <p><a href=" http://www.baidu.com/usedcar/6128" title="蒙迪欧-致胜 2.3AT时尚型">蒙迪欧-致胜 2.3AT时尚型</a><br /> <span class="style05">所在地:武汉</span><br /> 特惠价:<span class="style05">¥15万元</span></p></li> <li class=pl><a href="http://www.baidu.com/usedcar/5749" onmousedown=this.href=urlParamAdd(this.href)><img src=" http://www.baidu.com/uploads/carimages/201006/127708497371.jpg" alt="福美来 SDX1.6自动豪华" /></a> <p><a href=" http://www.baidu.com/usedcar/5749" title="福美来 SDX1.6自动豪华">福美来 SDX1.6自动豪华</a><br /> <span class="style05">所在地:武汉</span><br /> 特惠价:<span class="style05">¥6.7万元</span></p></li> <li class=pl><a href="http://www.baidu.com/usedcar/5748" onmousedown=this.href=urlParamAdd(this.href)><img src=" http://www.baidu.com/uploads/carimages/201006/127708389042.jpg" alt="伊兰特悦动 1.6AT GL" /></a> <p><a href=" http://www.baidu.com/usedcar/5748" title="伊兰特悦动 1.6AT GL">伊兰特悦动 1.6AT GL</a><br /> <span class="style05">所在地:武汉</span><br /> 特惠价:<span class="style05">¥9.4万元</span></p></li> </DIV> <DIV id=List2_1></DIV></DIV> </DIV> <DIV onmouseup=ISL_StopDown_1() class=RightBotton onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1()></DIV></DIV> <script type="text/javascript" src="marquee-img.js"></script>
以上是html代码,下面是js代码:
<!-- //图片滚动列表 mengjia 070927 var Speed_1 = 10; //速度(毫秒) var Space_1 = 10; //每次移动(px) var PageWidth_1 = 200; //翻页宽度 var fill_1 = 0; //整体移位 var MoveLock_1 = false; var MoveTimeObj_1; var MoveWay_1="right"; var Comp_1 = 0; var AutoPlayObj_1=null;GetObj("List2_1").innerHTML=GetObj("List1_1").innerHTML;GetObj('ISL_Cont_1').scrollLeft=fill_1>=0?fill_1:GetObj('List1_1').scrollWidth-Math.abs(fill_1);GetObj("ISL_Cont_1").onmouseover=function(){clearInterval(AutoPlayObj_1)} GetObj("ISL_Cont_1").onmouseout=function(){AutoPlay_1()} AutoPlay_1();function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} function AutoPlay_1(){clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval('ISL_GoDown_1();ISL_StopDown_1();',3000)} function ISL_GoUp_1(){if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="left";MoveTimeObj_1=setInterval('ISL_ScrUp_1();',Speed_1);} function ISL_StopUp_1(){if(MoveWay_1 == "right"){return};clearInterval(MoveTimeObj_1);if((GetObj('ISL_Cont_1').scrollLeft-fill_1)%PageWidth_1!=0){Comp_1=fill_1-(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1);CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrUp_1(){if(GetObj('ISL_Cont_1').scrollLeft<=0){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft+GetObj('List1_1').offsetWidth} GetObj('ISL_Cont_1').scrollLeft-=Space_1} function ISL_GoDown_1(){clearInterval(MoveTimeObj_1);if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="right";ISL_ScrDown_1();MoveTimeObj_1=setInterval('ISL_ScrDown_1()',Speed_1)} function ISL_StopDown_1(){if(MoveWay_1 == "left"){return};clearInterval(MoveTimeObj_1);if(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1-(fill_1>=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft>=GetObj('List1_1').scrollWidth){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth} GetObj('ISL_Cont_1').scrollLeft+=Space_1} function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return} var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)<PageWidth_1/2){TempSpace=Math.round(Math.abs(Comp_1/Space_1));if(TempSpace<1){TempSpace=1}} if(Comp_1<0){if(Comp_1<-TempSpace){Comp_1+=TempSpace;num=TempSpace}else{num=-Comp_1;Comp_1=0} GetObj('ISL_Cont_1').scrollLeft-=num;setTimeout('CompScr_1()',TempSpeed)}else{if(Comp_1>TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0} GetObj('ISL_Cont_1').scrollLeft+=num;setTimeout('CompScr_1()',TempSpeed)}} //-->
兼容多浏览器,目前ie系列和Firefox下正常. html里的图片和链接地址直接替换.自行调试js的滚动宽度.
提供附件,里面是一个完整的演示例子:
发表评论
-
webuploader实例php 配合fastDFS远程跨域上传回调的注意点
2016-08-02 19:31 3273webuploader上传控件是百度官方提供的一套基于ht ... -
bootstrap上传插件fileinput自动上传&上传成功回调的方法
2016-05-04 19:25 11303bootstrap上传插件fileinput功能非常强大, ... -
bootstrap上传插件fileinput自动上传&上传成功回调的方法
2016-05-03 20:16 21bootstrap上传插件fileinput功能非常强大,本 ... -
微信内置浏览器图片查看方式的原生实现(非jssdk)
2015-06-29 13:30 9962对于非公众平台网页,想调起图片预览组件,就跟公众号文章一样的 ... -
ajax提交表单的一些注意事项:解释为什么return false却依然提交
2012-02-02 19:10 2105ajax提交表单的一些注意事项.ajax提交表单是经常用到的. ... -
phpcms v9编辑器ckeditor数据恢复功能
2011-11-12 21:57 2814为phpcms v9的ckeditor编辑器开发的数据恢复功能 ... -
php+js抓取太平洋汽车网数据自动填表的一个实现
2011-11-11 22:34 2893主要是php输出json,js解析的模式 function ... -
jQuery二维码插件-改自MyQRCode,支持中文字符
2011-08-27 19:34 3848jQuery二维码插件-改自MyQRCode /** ... -
ajax中文参数乱码&ajax缓存的解决方法
2011-07-19 22:13 1547function ajax_get_xm(id,value ... -
jquery和multiple的前世今生-一点点代码收集
2011-03-17 13:43 1233<script type="text/ja ... -
对联广告代码_兼容jquery框架
2011-03-15 09:51 2625对联广告代码: suspendcode="< ... -
二维json格式的解法
2011-01-26 11:01 5083从淘宝数据魔方抓取来的行情简报,json格式如下: [[{& ... -
ckeditor编辑器Word文档粘贴自动去格式的解决方法
2011-01-12 22:36 7778ckeditor,个人感觉相当难用,默认版本会自动格式化从Wo ... -
ckeditor编辑器字体字体大小的调整
2011-01-05 19:55 2888ckeditor编辑器字体字体大小的调整,for phpcms ... -
select下拉框下拉跳转代码
2010-12-22 09:12 3306select下拉框下拉跳转代码 <select na ... -
jquery val() 返回undefined的问题
2010-12-14 17:07 2684jquery val() 返回undefined的问题. ... -
js动态显示时间_js 显示时间的一般写法
2010-12-08 15:43 2010js动态显示时间_js 显示时间的一般写法,数秒效果.不是那种 ... -
分享几条伪静态规则的写法 .htaccess
2010-11-29 10:47 2977RewriteEngine on ... -
js解析php返回的数组格式字符串
2010-11-28 23:43 3210ajax请求php返回一个数组格式的字符串,情况特殊不能修改p ... -
js中replace的用法 正则替换全部符合条件的字符串
2010-11-28 23:38 2308js中replace的用法. <script lan ...
相关推荐
"jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术,它使得图片能够在页面上以平滑、连续的方式移动,既可以从左到右,也可以从上到下,为用户带来流畅的视觉体验。 jQuery是一个...
在电商网站或产品展示页面中,图片无缝滚动是一种常见的视觉设计手法,它能够吸引用户的注意力,提升用户体验。本文将深入讲解如何使用JS实现产品图片的向左和向上无缝滚动效果。 首先,我们需要理解无缝滚动的基本...
7. **无缝循环**:为实现“无缝”,需要处理边界情况,当图片滚动到最后一张时,应立即返回到第一张,且过渡自然无断裂感。这可能涉及到数组索引的计算和图片的重新排列。 8. **优化性能**:考虑到用户体验,代码...
"图片左右无缝滚动JS代码"是指使用JavaScript编程语言实现的一种特效,它允许图片在水平方向上连续、平滑地滚动,模拟出一种无限循环的效果,为用户带来更为连贯的浏览体验。这种效果尤其适用于新闻轮播、产品展示或...
"无缝图片滚动效果"是网页设计中的一种常见视觉特效,它可以让图片以平滑连续的方式循环滚动,给予用户流畅的浏览体验。这个效果常用于产品展示、轮播广告或照片墙等场景。 该插件的主要功能是创建一个自动或手动...
网页图片的无缝循环滚动主要通过HTML结构布局与JavaScript控制相结合来实现。其核心思想是创建两个并行的元素,其中一个作为实际显示区域(如`demo1`),另一个作为复制区域(如`demo2`)。复制区域会克隆显示区域的...
JavaScript图片左右无缝滚动是一种常见的网页动态效果,常用于展示多张图片并使用户可以通过鼠标操作来浏览。这种技术主要依赖JavaScript语言以及HTML和CSS来实现。以下是对这一知识点的详细说明: 1. **JavaScript...
DZ首页DIY图片滚动代码,可以实现多图向左循环滚动,并且速度可调整
### 常用JS图片滚动(无缝、平滑、上下左右滚动)代码解析 #### 一、概述 本文档提供了一段实现图片无缝滚动的JavaScript代码。该代码能够实现图片在网页上的平滑滚动,包括上下两个方向。这段代码不仅适用于创建...
【标题】"js无缝图片滚动代码素材.rar"指的是一个JavaScript实现的无缝图片滚动代码资源,它可以帮助网页开发者创建出平滑、高效的图片展示效果。在网页设计中,图片滚动是一种常见的交互元素,常用于新闻更新、产品...
本文将深入探讨这种支持单排图片上下滚动和无缝滚动的js图片滚动插件。 首先,单排图片上下滚动是指在网页的一行(或一列)内展示图片,并允许用户通过点击按钮或自动播放来上下滚动这些图片。这种方式使得有限的...
在IT行业中,图片四个方向无缝滚动是一种常见的网页动态效果,尤其在展示长图或轮播图时使用广泛。这种技术可以提升用户体验,使用户能够轻松地浏览和探索大量的图像信息。接下来,我们将深入探讨实现这一功能的核心...
JS代码部分则是实现无缝滚动的关键。它需要监听鼠标移动事件(`mousemove`),获取鼠标相对于容器的位置,然后根据鼠标向左或向右移动来改变图片的位置。为了实现“无缝”效果,当图片滚动到边界时,需要将第一张或...
【标题】"鼠标感应图片无缝左右JS滚动代码.zip" 是一个包含JavaScript代码的资源包,主要用于实现一种交互式的图片滚动效果。这种效果使得用户在网页上通过鼠标悬停就能实现图片的平滑、无缝左右滚动,增加了用户...
无缝滚动技术的主要目标是让页面内容(无论是文字还是图片)在不中断视觉连续性的情况下自动滑动,给人一种流畅无尽的视觉体验。在JavaScript中,可以利用定时器和数组方法来实现这一效果。 首先,对于js文字无缝...
1. **JavaScript**:在这些压缩包中,如"js图片左右滚动 可停止放大.rar",JavaScript是实现图片滚动的核心技术。通过编写JS脚本,我们可以控制图片的显示和动画效果,例如设置定时器来实现间隔性滚动,或者添加事件...
js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js 图片无缝滚动js ...
jQuery图片左右无缝滚动特效是一种常见的网页动态效果,用于展示多张图片并营造出平滑、连贯的浏览体验。...开发者可以通过理解这些知识点,结合实际的代码实现,来创建或优化自己的图片滚动特效。