漂亮的JS图片滑动切换效果

最新推荐文章于 2023-03-09 15:14:38 发布
最新推荐文章于 2023-03-09 15:14:38 发布
阅读量1.8k 收藏 2
点赞数
文章标签： function timer class callback float object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t115872285/article/details/6293126
版权

<HTML>
<HEAD>
<TITLE>一款常用的漂亮的JS图片滑动切换效果丨芯晴网页特效丨CsrCode.Cn</TITLE>
<style>
BODY {
 PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
UL {
 PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
.container {
 WIDTH: 400px; HEIGHT: 300px
}
.container A IMG {
 WIDTH: 400px; HEIGHT: 300px
}
.container IMG {
 BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none
}
.td_f A IMG {
 PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
.csrcode {
 POSITION: absolute; WIDTH: 90px; FLOAT: right; TOP: 280px; LEFT: 310px
}
.csrcode LI {
 TEXT-ALIGN: center; LINE-HEIGHT: 15px; LIST-STYLE-TYPE: none; MARGIN: 1px; WIDTH: 15px; FONT-FAMILY: Arial; BACKGROUND: url(http://www.CsrCode.cn/html/txdm_2/images/20101104/flashbutton.gif) no-repeat -15px 0px; FLOAT: left; HEIGHT: 15px; COLOR: #86a2b8; FONT-SIZE: 12px; CURSOR: pointer
}
.csrcode LI.on {
 LINE-HEIGHT: 15px; WIDTH: 15px; BACKGROUND: url(http://www.CsrCode.cn/html/txdm_2/images/20101104/flashbutton.gif) no-repeat; HEIGHT: 15px; COLOR: #ffffff
}
.more {
 FLOAT: right
}
.more1 A {
 TEXT-ALIGN: left; LINE-HEIGHT: 25px; MARGIN: 0px 0px 0px 10px; COLOR: #3373a3
}
</style>
<SCRIPT language=javascript>
if(typeof(pgvMain) == 'function')
pgvMain();
</SCRIPT>
<SCRIPT>
var gtopTab="one";
function $id(id){
 return document.getElementById(id);
}
function changesTab(tab_id){
 if (tab_id==gtopTab){
  return;
 }else{
  $id(gtopTab).className="unselect";
  $id(tab_id).className="select";
  $id("tab_"+gtopTab).style.display="none";
  $id("tab_"+tab_id).style.display="block";
  gtopTab=tab_id;
 }
}
</SCRIPT>
<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 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: 50,//滑动持续时间
  Time:  10,//滑动延时
  Pause:  4000,//停顿时间(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>
<DIV id=idContainer2 class=container>
<TABLE id=idSlider2 border=0 cellSpacing=0 cellPadding=0>
  <TBODY>
<TR>
<TD class="td_f"><A href="http://www.csrcode.net"><IMG src="http://www.CsrCode.cn/images/m01.jpg"></A></TD>
<TD class="td_f"><A href="http://www.csrcode.net"><IMG src="http://www.CsrCode.cn/images/m02.jpg"></A></TD>
<TD class="td_f"><A href="http://csrcode.net"><IMG src="http://www.CsrCode.cn/images/m03.jpg"></A></TD>
<TD class="td_f"><A href="http://www.csrcode.net"><IMG src="http://www.CsrCode.cn/images/m04.jpg"></A></TD>
<TD class="td_f"><A href="http://www.csrcode.net"><IMG  src="http://www.CsrCode.cn/images/m05.jpg"></A></TD>
</TR>
  </TBODY>
</TABLE>
<UL id="www_csrcode_cn" class="csrcode"></UL>
</DIV>
<SCRIPT>
//new SlideTrans("idContainer", "idSlider", 3).Run();
///
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 st = new SlideTrans("idContainer2", "idSlider2", 5, { Vertical: false });
var nums = [];
//插入数字
for(var i = 0, n = st._count - 1; i <= n;){
 (nums[i] = $("www_csrcode_cn").appendChild(document.createElement("li"))).innerHTML = ++i;
}
forEach(nums, function(o, i){
 o.onmouseover = function(){ o.className = "on"; st.Auto = false; st.Run(i); }
 o.onmouseout = function(){ o.className = ""; st.Auto = true; st.Run(); }
})
//设置按钮样式
st.onStart = function(){
 forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })
}
//$("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;
 //}
//}
st.Run();
</SCRIPT>
</BODY>
</HTML>

<p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</p>

文章由 芯晴网页特效|CsrCode.CN 收集(www.CsrCode.cn) 详文参考：http://www.csrcode.cn/html/txdm/txtx/2737.htm

t115872285
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript 图片滑动切换效果
cloudgamer的专栏
07-06 592
序一（08/07/06）看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。由于有了做图片滑动展示效果的经验，做这个就容易得多了。序二（09/03/19）自写了Tween缓动之后就很想重新写过这个效果，近来有点时间，终于可以动手了。除了改成Tween缓动，也改进了程序算法，不过原理还是一样的。效果预览<!--var $
HTML5全屏图文左右滑动切换特效
07-02
HTML5全屏图文左右滑动切换特效是一款基于jQuery HTML5实现的全屏图文切换特效代码。亲测可用哦！
js图片滑动切换效果
风火一回，一生不毁
09-02 1万+
最近遇到需要图片滑动切换的效果纠结了好久，终于弄出了一个简单的效果。 图片切换的原理一般来说可以分为两种，一种是利用position:absolute；top或left来显示需要的图片，其他图片隐藏。 另一种是通过opacity来调节透明度，让需要的图片不透明，其他图片透明。 下面来看看我的实现吧！ HTML代码： CSS样式： #person
HTML实现图片切换
m0_58144335的博客
07-01 5217
HTML实现图片切换
图片切换之HTML
weixin_44811903的博客
10-25 4576
图片切换作为it小白必学的练习之一，在简单基础上了解前端的知识点，提高it学习的兴趣，为接下来的实战做准备。
html如何实现图片左右滑动效果,HTML+CSS入门 如何实现图片(image) 左右滑动
weixin_35772595的博客
06-03 1万+
本篇教程介绍了HTML+CSS入门 如何实现图片(image) 左右滑动，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<1、需求需要用简单动画的形式将一组图片进行展示，图片数量不固定2、效果如下:3、思路说到动画，首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧，然后根据图片数量计算每个图片的左边距，这样就可以依次排列了。然后就...
javascript 图片滑动切换代码
10-29
JavaScript图片滑动切换是一种常见的网页动态效果，常用于展示产品或图像信息，为用户提供更直观、交互性更强的浏览体验。在NVIDIA网站上，这种特效通过JavaScript与CSS的配合来实现，允许用户以平滑的动画效果在多...
swiper.js手机图片滑动切换代码
04-08
在"swiper.js手机图片滑动切换代码"中，Swiper.js的主要功能是实现图片的自动切换和手动滑动。以下是一些关键知识点： 1. **初始化Swiper实例**： 在HTML中，我们需要一个包含要滑动元素的容器，如`...
JavaScript图片滑动切换效果
06-12
JavaScript图片滑动切换效果是一种常见的网页动态展示技术，尤其在电商网站如淘宝和阿里巴巴上广泛使用，用于商品图片的展示。这种效果通过JavaScript编程实现，能够实现图片的自动轮播、手动点击切换、过渡动画等...
jquery实现网页图片滑动、渐变切换内容效果.rar
07-10
jquery实现网页图片滑动、渐变切换内容效果，为了测试准确，请使用火狐或chrome浏览器。当打开本效果后，左侧框架内的图片会随鼠标的变化上下滑动，鼠标单击时，右侧为切换左侧图片的大图片，内容也会随之变换，变换过程中采用淡入淡出的切换特效。
html5 bootstrap图片垂直滑动切换幻灯片特效.zip
07-11
这是一款带有上下箭头控制，使用bootstrap的布局实现的幻灯片切换代码，jQuery图片垂直滑动切换幻灯片特效。 引入js文件 [removed][removed] [removed][removed] [removed][removed] [removed][removed]
简单的HTML网页图片轮播自动切换
热门推荐
qq_51727668的博客
10-10 6万+
简单的HTML网页图片轮播切换[代码注释详解]效果展示1.必须的html元素2.css代码3.JavaScript代码4.思路总结觉得有帮助点个赞吧 效果展示 具体解释请参考代码中的注释! 总共展示5张图片，图片中间下方5个点的代表展示顺序。（如图可知播放到第二张图片） 图片左右两边的箭头上一张和下一张！ 1.必须的html元素 <!doctype html> <html> <head> <meta charset="utf-8"> <title&gt
dw在php图片滑动切换效果,超简单的图片左右切换滑动
weixin_42496225的博客
03-27 3328
网上看过很多图片左右切换滑动的效果，不过大都是使用插件实现。插件虽方便，但是对于新手的学习并不是最好的。本文使用jquery这个由原生的JavaScript封装的库，用最简短的代码实现此功能效果预览如下图：代码部分(直接复制代码便可使用，注意对应的图片路径改成自己的图片路径，图片大小建议300*300)html>超简单的图片左右切换滑动varcot=0;//设置一个计数器，初始值为0；作用...
html图片渐变滚动切换代码,轮播滚动效果+动画淡入淡出切换图片（内含demo）
weixin_34345947的博客
06-04 1941
起因：做了个滚动效果，除了自适应以外，都和腾讯AI开发平台的效果相似。主要技术点：1.动画淡入淡出切换图片2.轮播滚动效果 + hover改变选中滚动状态3.文字切换展示1.动画淡入淡出切换图片(通过控制CSS来改变效果)JS代码：// 替换class达到淡入淡出的效果fadeIn(e) {e.className = "time-slider-item fadein";}fadeOut(e) {e...
html中图片自动滑动样式,“图片滑动样式”修改HTML教程
weixin_36124631的博客
06-01 1392
通知：使用135编辑器，请在“360安全浏览器”“猎豹浏览器”“谷歌浏览器”，可减少出现一大堆问题！详情戳《135编辑器新手指南》胖友们，早上好！都说一张美美的图能为文章增色三分！那如果是一个交互的图片样式 + 几张美美图呢？这能为文章增色多少呢？比如这种(样式ID：90298)第一张图片第二张图片第三张图片第四张图片第五张图片左右滑动查看更多再比如这种(样式ID：86426)左右滑动查看更多使用...
js实现图片切换效果
qq_46162047的博客
03-09 2106
JS实现图片切换
在html中三个图片切换,轻松搞定网页中的图片切换
weixin_34646820的博客
06-09 1万+
生活中经常看到，像新浪等很多门户网站的首页都有滚动图片的展示，如下图所示：某网站首页滚动切换图片这样不但可以减少文字的单一、乏味，而且可以直观内容，更好的吸引用户。那在我们做软件系统时，是否也可以首页中加入滚动图片呢？答案是肯定的。今天就给大家介绍三种类似的展现方式。实现方式这些滚动展现方式，主要用到了我们平常学习到的网页HTML、样式CSS和JavaScript等知识。在具体实现时，需要结合实际...
用html+js实现图片拖拽切换位置【错过就后悔系列】
小魏快起床的博客
02-23 1370
在很多网页里面，有些图片位置摆放不对，那我们想手动的拖拽然后切换图片的位置，这种效果看着简单，实则并不容易，那么该如何去做呢，博主在这里进行一段分享，无毒可直接食用。
html图片滑动切换效果
最新发布
03-24
你可以使用CSS和JavaScript创建一个图片滑动切换效果。可以使用CSS中的transition和transform属性来平滑过渡和转换图片位置。JavaScript可用于处理用户的点击和滑动手势以控制图片切换。您可以在网上找到许多代码示例和教程来实现此效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

t115872285

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值