图片切换

最新推荐文章于 2022-10-25 15:30:42 发布
最新推荐文章于 2022-10-25 15:30:42 发布
阅读量424 收藏 1
点赞数
文章标签： function timer button callback border class

<!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=gb2312" />
<title>JavaScript 图片滑动切换效果</title>
<script type="text/javascript">
var $$ = function (id) {
 return "string" == typeof id ? document.getElementById(id) : id;
};

var Extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
 return destination;
}

var CurrentStyle = function(element){
 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

var Bind = function(object, fun) {
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function() {
  return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
 }
}

var forEach = function(array, callback, thisObject){
 if(array.forEach){
  array.forEach(callback, thisObject);
 }else{
  for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
 }
}

var Tween = {
 Quart: {
  easeOut: function(t,b,c,d){
   return -c * ((t=t/d-1)*t*t*t - 1) + b;
  }
 },
 Back: {
  easeOut: function(t,b,c,d,s){
   if (s == undefined) s = 1.70158;
   return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
  }
 },
 Bounce: {
  easeOut: function(t,b,c,d){
   if ((t/=d) < (1/2.75)) {
    return c*(7.5625*t*t) + b;
   } else if (t < (2/2.75)) {
    return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
   } else if (t < (2.5/2.75)) {
    return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
   } else {
    return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
   }
  }
 }
}


//容器对象,滑动对象,切换数量
var SlideTrans = function(container, slider, count, options) {
 this._slider = $$(slider);
 this._container = $$(container);//容器对象
 this._timer = null;//定时器
 this._count = Math.abs(count);//切换数量
 this._target = 0;//目标值
 this._t = this._b = this._c = 0;//tween参数
 
 this.Index = 0;//当前索引
 
 this.SetOptions(options);
 
 this.Auto = !!this.options.Auto;
 this.Duration = Math.abs(this.options.Duration);
 this.Time = Math.abs(this.options.Time);
 this.Pause = Math.abs(this.options.Pause);
 this.Tween = this.options.Tween;
 this.onStart = this.options.onStart;
 this.onFinish = this.options.onFinish;
 
 var bVertical = !!this.options.Vertical;
 this._css = bVertical ? "top" : "left";//方向
 
 //样式设置
 var p = CurrentStyle(this._container).position;
 p == "relative" || p == "absolute" || (this._container.style.position = "relative");
 this._container.style.overflow = "hidden";
 this._slider.style.position = "absolute";
 
 this.Change = this.options.Change ? this.options.Change :
  this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
};
SlideTrans.prototype = {
  //设置默认属性
  SetOptions: function(options) {
 this.options = {//默认值
  Vertical: true,//是否垂直方向（方向不能改）
  Auto:  true,//是否自动
  Change:  0,//改变量
  Duration: 30,//滑动持续时间
  Time:  10,//滑动延时
  Pause:  3000,//停顿时间(Auto为true时有效)
  onStart: function(){},//开始转换时执行
  onFinish: function(){},//完成转换时执行
  Tween:  Tween.Quart.easeOut//tween算子
 };
 Extend(this.options, options || {});
  },
  //开始切换
  Run: function(index) {
 //修正index
 index == undefined && (index = this.Index);
 index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
 //设置参数
 this._target = -Math.abs(this.Change) * (this.Index = index);
 this._t = 0;
 this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
 this._c = this._target - this._b;
 
 this.onStart();
 this.Move();
  },
  //移动
  Move: function() {
 clearTimeout(this._timer);
 //未到达目标继续移动否则进行下一次滑动
 if (this._c && this._t < this.Duration) {
  this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
  this._timer = setTimeout(Bind(this, this.Move), this.Time);
 }else{
  this.MoveTo(this._target);
  this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
 }
  },
  //移动到
  MoveTo: function(i) {
 this._slider.style[this._css] = i + "px";
  },
  //下一个
  Next: function() {
 this.Run(++this.Index);
  },
  //上一个
  Previous: function() {
 this.Run(--this.Index);
  },
  //停止
  Stop: function() {
 clearTimeout(this._timer); this.MoveTo(this._target);
  }
};
</script>
</head>
<body>
<style type="text/css">
.container, .container img{width:280px; height:200px;}
.container img{border:0;vertical-align:top;}
</style>
<div class="container" id="idContainer">
 <table id="idSlider" border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html"><img src="3.jpg"/></a></td>
   <td><a href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html"><img src="4.gif"/></a></td>
   <td><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html"><img src="5.jpg"/></a></td>
  </tr>
 </table>
</div>
<script>
new SlideTrans("idContainer", "idSlider", 3, { Vertical: false }).Run();
</script>
<br />
<style type="text/css">
.container ul, .container li{list-style:none;margin:0;padding:0;}

.num{ position:absolute; right:5px; bottom:5px; font:12px/1.5 tahoma, arial; height:18px;}
.num li{
 float: left;
 color: #d94b01;
 text-align: center;
 line-height: 16px;
 width: 16px;
 height: 16px;
 font-family: Arial;
 font-size: 11px;
 cursor: pointer;
 margin-left: 3px;
 border: 1px solid #f47500;
 background-color: #fcf2cf;
}
.num li.on{
 line-height: 18px;
 width: 18px;
 height: 18px;
 font-size: 14px;
 margin-top:-2px;
 background-color: #ff9415;
 font-weight: bold;
 color:#FFF;
}
</style>
仿淘宝/alibaba图片切换：
<div class="container" id="idContainer2">
 <ul id="idSlider2">
  <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html"> <img src="1.gif" alt="图片上传预览" /> </a></li>
  <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/08/10/FixedMenu.html"> <img src="2.jpg" alt="多级联动菜单" /> </a></li>
  <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/07/07/FixedTips.html"> <img src="3.jpg" alt="浮动定位提示" /> </a></li>
  <li><a href="http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html"> <img src="4.gif" alt="数据延迟加载" /> </a></li>
  <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/12/01/Quick_Upload.html"> <img src="5.jpg" alt="简便文件上传" /> </a></li>
 </ul>
 <ul class="num" id="idNum">
 </ul>
</div>
<br />
<div>
 <input id="idAuto" type="button" value="停止" />
 <input id="idPre" type="button" value="&lt;&lt;" />
 <input id="idNext" type="button" value="&gt;&gt;" />
 <select id="idTween">
  <option value="0">默认缓动</option>
  <option value="1">方式1</option>
  <option value="2">方式2</option>
 </select>
</div>
<script>

var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length,
 st = new SlideTrans("idContainer2", "idSlider2", n, {
  onStart: function(){//设置按钮样式
   forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })
  }
 });
for(var i = 1; i <= n; AddNum(i++)){};
function AddNum(i){
 var num = $$("idNum").appendChild(document.createElement("li"));
 num.innerHTML = i--;
 num.onmouseover = function(){
  timer = setTimeout(function(){ num.className = "on"; st.Auto = false; st.Run(i); }, 200);
 }
 num.onmouseout = function(){ clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); }
 nums[i] = num;
}
st.Run();


$$("idAuto").onclick = function(){
 if(st.Auto){
  st.Auto = false; st.Stop(); this.value = "自动";
 }else{
  st.Auto = true; st.Run(); this.value = "停止";
 }
}
$$("idNext").onclick = function(){ st.Next(); }
$$("idPre").onclick = function(){ st.Previous(); }
$$("idTween").onchange = function(){
 switch (parseInt(this.value)){
  case 2 :
   st.Tween = Tween.Bounce.easeOut; break;
  case 1 :
   st.Tween = Tween.Back.easeOut; break;
  default :
   st.Tween = Tween.Quart.easeOut;
 }
}

</script>
</body>
</html>

java_dream_fly
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html实现简单图片切换,JavaScript实现简单的图片切换
weixin_39561431的博客
06-04 2211
JavaScript实现图片切换，主要用到setInterval()函数和clearInterval()函数，前者功能是开启动画，后者功能则为清除动画(可理解为使动画停止)，为了使动画停止，则需要定义全局变量作为标志，标志返回setInterval()函数的id，id作为clearInterval()函数的引用，目的是为了告诉clearInterval()函数动画暂停的位置。下面是实现的代码：一、...
基于Bootstrap框架实现图片切换
08-31
基于Bootstrap框架实现图片切换 Bootstrap是一款流行的前端框架，广泛应用于Web开发中。图片切换是Bootstrap框架中一个常见的特性，通过Bootstrap框架可以轻松地实现图片切换功能。本文将详细介绍基于Bootstrap框架...
利用JS实现图片切换
dweblover的博客
11-19 4万+
事件举例: 1.要求实现效果：当鼠标悬停在照片上时更换为另一张照片；当鼠标离开时，还原为本来的图片。 说明： 1.一般来说对于一个事件问题处理起来分为三个步骤： （1）获取事件 （2）绑定事件 （3）书写事件驱动程序 代码如下 &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&q
SuperSlide图片切换
热门推荐
06-07 5万+
There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence.
JavaScript图片切换
weixin_57769777的博客
06-07 2427
本次使用的是图片切换的效果主要javaScript来实现功能。 一、什么是HTML，HTML怎么作用法，HTML具体能做什么？ HTML是超文本标签语言（Hyper Text Markup Labguage）,标准用过标记语言下的一个应用。HTML不是编程语言，而是一种标记语言（markup language）,是自作网页的首选。 HTML 超文本编程语言定于：超文本标记语言是标准 用标记语言下的一个应用，也是个一种规范，一种标准。它通过标记符号来标记要，起到标记的重要作用，那么本次就是使用到了jav
微信小程序点击图片切换图片
小牧在一直在学习,在前进的道路上大家一起学习，进步。
04-19 2万+
实现的效果图 实现的方式有2中 先说下思路 1 使用wx:if写2个图片 点击的显示一张即可, 2 使用数据传递当拿到图片的时候更换图片即可. 看下代码 2中方式:xml <view class="intro"> <image catchtap='open_tap' wx:if="{{isShow}}" src="/images/icon_flashli...
图片切换之HTML
weixin_44811903的博客
10-25 4582
图片切换作为it小白必学的练习之一，在简单基础上了解前端的知识点，提高it学习的兴趣，为接下来的实战做准备。
HTML实现图片切换
m0_58144335的博客
07-01 5221
HTML实现图片切换
JS 轮播图 图片切换（定时器）
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
jQuery进行图片切换
weixin_44886806的博客
05-08 4005
图片切换用JavaScript来写的话代码稍微有点多，如果用jQuery的话就简单的多了。 首先先写好HTML和css的代码： HTML： <div id="box"> <img src="../0bed5d59f12720752019fc2b8ad48993.jpg" alt=""> <img src="../1c34660a6917f03b1249f8a1923d36ef.jpg" alt=""> <img src="../83f4b8d
实现图片切换效果
是吃货不是贝爷的博客
04-06 2507
在老师开始讲这个题目前，我试着先自己琢磨，能想到需要运用数组储存图片并根据索引来达到图片随着按钮点击而切换并改变提示的功能，但是没有增加到索引增加到最大值后的处理方式。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <titl...
12种炫酷CSS3图片切换过渡效果
12-29
【CSS3图片切换过渡效果详解】 CSS3是 Cascading Style Sheets 的第三个主要版本，它引入了许多新特性，其中最引人注目的就是丰富的动画和过渡效果。这些效果为网页设计带来了前所未有的动态视觉体验，特别是在图片...
JS实现图片切换效果
10-17
主要为大家详细介绍了基于JavaScript实现图片切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Winform下实现图片切换特效的方法
09-04
在Windows Forms（Winform）应用程序开发中，有时候为了增加用户界面的交互性和视觉吸引力，我们需要实现图片切换特效。本文将详细介绍如何在Winform环境下实现图片切换的多种特效，包括百叶窗、淡入、旋转等。 ...
jquery手风琴实现图片切换
06-10
本教程将详细讲解如何利用jQuery实现一个手风琴式的图片切换效果，该效果同时具备自动播放和手动播放功能，用户可以通过点击文字来控制图片的切换。 首先，我们需要在HTML中设置基本的结构。手风琴效果通常涉及到可...
尚品汇项目思维导图 根据思维导图进行复习
07-13
尚品汇项目思维导图 根据思维导图进行复习
全网最热Python3入门+进阶 更快上手实际开发
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
Go：Go语言项目实战教程
07-14
Go：Go语言项目实战教程
反恐精英游戏CS1.6安装好后界面看不到菜单，改中文，并调整分辨率
最新发布
07-14
反恐精英游戏CS1.6安装后，很多人打开后界面是看不到菜单的，一般是因为分辨率不对，将这个.reg导入即可完成设置。 下载完成后，双击运行该文件，按照提示进行操作。在导入过程中，可能会出现警告信息，点击“是”或“确定”继续。 导入成功后，重新启动CS1.6游戏，你会发现界面已经调整为正确的分辨率，菜单也能够正常显示了。这样，你就可以愉快地享受游戏了。
javascript图片切换
10-02
JavaScript图片切换是一种通过JavaScript代码实现在网页中动态切换图片的效果的方法。根据提供的引用内容，可以使用以下代码实现简单的图片切换效果： ``` 图片组 图片组 var sspeed = 10; demog2....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值