JS图片滚动代码（无缝、平滑）

最新推荐文章于 2022-12-01 20:11:52 发布
最新推荐文章于 2022-12-01 20:11:52 发布
阅读量491 收藏
点赞数
文章标签： function up class xhtml object flash

<!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>
<title>前后轮翻的JS图片幻灯切换</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
img{border:0;}
.bannerImage{margin-left:200px;margin-top:50px;border:1px solid #f60;width:452px;height:346px;position:relative; overflow:hidden;}
.bannerImage p{font-size:0;display:block;width:448px;height:338px;}
.bannerImage p a{position:absolute;left:0px;top:0px;}
.bannerImage span{position:absolute; right:10px;bottom:10px; z-index:100;}
.bannerImage span a{text-decoration:none; margin-left:5px; display:block;border:1px solid #f60; text-align:center;width:14px; height:16px; background-color:#fff;float:left; font-size:12px; background-color:#999;}
.bannerImage span a:hover{background-color:#eee;}
.bannerImage span a.cur{background-color:#eee;}
.hid{display:none;}
</style>
<script type="text/javascript">
var $ID = function(id){
 return "string"==typeof id?document.getElementById(id):id;
}
var Class = {
 create:function(){
  return function(){
   this.initilize.apply(this,arguments);
  }
 }
}
var Bind = function(object,fun){
 var args = Array.prototype.slice.call(arguments,2);
 return function(){
  return fun.apply(object,args);
 }
}
</script>
<script type="text/javascript">
var Flash = Class.create();
Flash.prototype = {
 initilize:function(contain){
  this.len = $ID(contain).getElementsByTagName("p")[0].getElementsByTagName("a").length;
  if(this.len<=1) return;
  this.width = $ID("banner_up_1").offsetWidth;
  this.cur = 1;
  if(this.len<=1) return;
  this.cur2 = 2;
  this.i = 0;
  this._fnRun = Bind(this,this.Run);
  this._fnRun2 = Bind(this,this.Run2);
  this.t = window.setTimeout(this._fnRun,2000);
 },
 Run:function(){
  if(this.i<=-(this.width/2)){
   this.i = -(this.width/2)
   $ID("banner_up_" + this.cur).style.left = this.i + "px";
   $ID("banner_up_" + this.cur2).style.left = -this.i + "px";
   $ID("banner_up_" + this.cur2).style.zIndex = parseInt($ID("banner_up_" + this.cur).style.zIndex) + this.len;
   this.t = window.setTimeout(this._fnRun2,5);
   return;
  }
  this.i-=6;
  $ID("banner_up_" + this.cur).style.left = this.i + "px";
  $ID("banner_up_" + this.cur2).style.left = Math.abs(this.i) + "px";
  this.t = window.setTimeout(this._fnRun,10);
 },
 Run2:function(){
  if(this.i>0){
   $ID("banner_down_" + this.cur).className = "";
   $ID("banner_down_" + this.cur2).className = "cur";
   $ID("banner_up_" + this.cur).style.left = $ID("banner_up_" + this.cur2).style.left = "0px";
   this.cur++;
   if(this.cur>this.len)
    this.cur = 1;
   this.cur2 = this.GetNext();
   $ID("banner_up_" + this.cur2).style.zIndex = parseInt($ID("banner_up_" + this.cur).style.zIndex)-1;
   this.t = window.setTimeout(this._fnRun,3000);
   return;
  }
  this.i+=6;
  $ID("banner_up_" + this.cur).style.left = this.i + "px";
  $ID("banner_up_" + this.cur2).style.left = -this.i + "px";
  this.t = window.setTimeout(this._fnRun2,10);
 },
 GetNext:function(){
  if(this.cur == this.len)
   return 1;
  else
   return this.cur + 1;
 }
}
onload = function(){
 new Flash("bannerImage");
}
</script>
</head>
<body>
<div class="bannerImage" id="bannerImage">
  <p>
    <a href="#" id="banner_up_1" style="z-index:4"><img src="/jscss/demoimg/wall1.jpg"></a>
    <a href="#" id="banner_up_2" style="z-index:3"><img src="/jscss/demoimg/wall2.jpg"></a>
    <a href="#" id="banner_up_3" style="z-index:2"><img src="/jscss/demoimg/wall3.jpg"></a>
  </p>
  <span>
    <a href="#" id="banner_down_1" class="cur">1</a>
    <a href="#" id="banner_down_2">2</a>
    <a href="#" id="banner_down_3">3</a>
  </span>
</div>
</body>
</html>

maokaijiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
水平方向无缝滚动的图片特效
weixin_45884768的博客
12-05 1752
1 编写HTML文件 在这里插入代码片 2 编写CSS样式 在这里插入代码片 3 编定JS脚本 在这里插入代码片
JS实现图片无缝滚动效果
liujian573281的博客
01-12 5828
首先，借助一张草图来简单说明一下往左移动的做法（往右相同）。 如上图所示，图片的无缝滚动原理其实是把滚动的图片复制成两份并联排列，当滚动完一次后就把图片扯回到起点，重新滚动。这里的往左运动把图片扯回起点的临界点是offsetLeft的绝对值大于offsetWidth/2的绝对值。接着，我们再来看看具体实现的代码： 第一步：简单的布局，这里以外层的div为相对物设置相对定位并设置超出隐藏，再给
基于javascript实现图片滑动效果
12-28
今天看了别人写的图片滑动，看起来很酷，读源码时，似乎有些困难，就模仿着写了一个，实现的效果与原网页相同，不过自己的js代码，逻辑简单，有待改进。 ps：前两天写了旋转木马，那个兼容性不好，今天写这个网页的时候，也是按照这个思路，在谷歌浏览器上运行很好，火狐很多功能不能实现，由于wrap——panel使用了绝对定位，就将translate平移改为了left。改动后，各个浏览器运行的效果不错。 具体代码如下 html代码（没写注释） <div class=container> <h1>Parallax Slider</h1> <div class=wrap>
html 文字、图片水平无限滚动
热门推荐
Aliguagua的博客
12-16 2万+
html 文字、图片水平无限滚动经常在淘宝、京东的app页面中看见水平的广告轮播和中奖信息的轮播。我知道的实现这种无限滚动效果的方法有三种： 使用CSS3样式实现 使用js实现 marquee标签（好像不推荐使用了，我没用过，百度可以找到挺多相关博客的） 1.方式不管是用css实现还是js，实现方式是差不多的。为了让无限循环滚动时内容衔接更好一点，滚动内容会有两份一模一样的，大概步骤如下： 2.C
[练习4]js学习之图片的水平滚动
beiyuxinke的博客
04-04 364
Headliner
html滑动验证图片,纯js实现图片滑块验证
weixin_42362931的博客
06-04 994
需求：js实现滑块验证思路：设置position:absolute,通过left值控制滑动再来说几个js事件:onmousedown事件会在鼠标按键被按下时发生onmousemove事件会在鼠标指针移动时发生onmouseup事件会在鼠标松开时发生实现：//完成图片及滑块的摆放 请拖动滑块解锁>>及样式：.box {width: 311px;height:155px;ma...
JS图片无缝、平滑滚动代码
10-26
主要介绍了JS图片无缝、平滑滚动的实现,需要的朋友可以参考下
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)
10-20
JavaScript图片滚动是一种常见的网页动态效果，它可以为用户提供更生动、吸引人的浏览体验。本文将详细介绍如何使用JavaScript实现图片的无缝、平滑、上下左右滚动效果。 首先，我们要明白JavaScript图片滚动的基本...
js无缝滚动代码制作js图片无缝滚动向上无缝滚动
11-17
以上代码是一个基础的图片向上无缝滚动的实现，实际应用中可能需要考虑更多的细节，比如兼容性、动画平滑性以及用户交互等。在进行此类效果的开发时，可以结合CSS3的`transition`和`transform`属性，以及现代浏览器...
HTML5全屏图片左右滑动轮播特效代码
03-20
HTML5全屏图片左右滑动轮播代码是一款全屏响应式图片轮播布局，按钮控制图片水平滑动预览查看，图片支持鼠标悬停文字动画展示特效。
JS实现图片无缝滚动的完美解决
06-18
JS实现图片无缝滚动的完美解决 无间隙滚动
在html中使用js实现图片的无缝滚动（四种状态）
梁辰兴的博客
12-01 7132
获取整个ul和ul下面的所有li， 把ul里面的li内容添加一份，因为需要完成图片滚动效果所以需要二份完成无缝对接， 定义初始速度。设置定时器 在定时中进行判断 实现原理：因为ul是跟着父元素div进行定位的，所以ul的offsetleft的值初始值为0。只需要改变ul的left值就可以完成滚动效果 当ul的offsetleft值大于0的时候说明图片正在向右滚动，此时只需要把当前left值变成整个盒子的一半。并且将盒子定位到左边一半的位置就能完成滚动中的无缝对接。当uL的offset值小于负的此时盒
原生javascript实现图片左右平滑轮播效果（思路分析+代码）
小福气的博客
07-21 5431
效果截图： 思路： 1准备工作 1通过html和css实现图片水平布局（可以在main里面设置overflow=scrollleft，更好的观察图片移动的轨迹） 2获取需要操作的对象 3设置默认展示的图片的下标imgIndex=1 默认的轮播按钮下标btnIndex=0 初始的main的scrollLeftmain.scr...
java实现图片滚动_怎么用Java代码使图片自行滚动浏览
weixin_42510805的博客
02-13 1503
图片循环滚动代码和图片无缝滚动代码先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间。先了解一...
css3实现图片平滑切换
Miss_Audrey的博客
11-30 1万+
css部分： <style> #div01{ width:200px; height:200px; position: relative; } img{ width:200px; height:200px; b
html如何设置图片自动滑动效果,javascript图片滑动效果实现
weixin_33340674的博客
06-01 1449
本文为大家分享了javascript图片滑动效果实现方法，具体内容如下，先看一下效果图：鼠标滑过那张图，显示完整的哪张图，移除则复位：简单的CSS加JS操作DOM实现：sliding doors css:#container {height: 477px;margin: 0 auto;border-right: 1px solid #ccc;border-bottom: 1px solid ...
js 实现图片无缝滚动
thewebcode
06-22 61
非常平滑的JS图片滚动特效代码，无缝循环，速度可自定义，鼠标悬停时停止。它的特点是JS和图片地址分离，这样做你就经易的从数据库动态调用每张图片的地址，方便控制，因此它非常的实用。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
weixin_39842475的博客
06-03 244
本文实例讲述了jquery实现图片水平滚动效果，分享给大家供大家参考。具体如下：运行效果图：-------------------查看效果-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的jquery实现图片水平滚动效果代码如下jquery实现图片水平滚动效果style="width: 120px; display: inline-block...
wpf 无缝图片滚动
最新发布
12-07
在WPF中实现无缝图片滚动可以通过以下步骤来实现。 第一步，创建一个滚动视图控件。可以使用ScrollViewer控件作为容器来包含图片，然后设置其水平滚动条可见。 第二步，添加一个StackPanel或者WrapPanel作为滚动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值