使用纯生js实现图片轮换
效果图预览.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>使用纯生js实现图片轮换效果</title>> 5 <link href="Styles/style.css" rel="stylesheet" type="text/css" /> 6 </head> 7 <body> 8 <div id="slider"> 9 <div class="slide" style="border-left-style: none; left: 0px;"> 10 <a href="#"> 11 <img class="diapo" src="Images/642120642011110815551808.jpg" alt="" style="opacity: 0.8; 12 visibility: visible;"></a> 13 <div class="backgroundText" style="top: 233px;"> 14 </div> 15 <div class="text" style="top: 233px;"> 16 <span class="stitle">《千本哈》</span>金馆长进军音乐界</div> 17 </div> 18 <div class="slide" style="left: 90px;"> 19 <a href="#"> 20 <img class="diapo" src="Images/6421206420111014165330056.jpg" alt="" style="opacity: 0.8; 21 visibility: visible;"></a> 22 <div class="backgroundText" style="top: 231px;"> 23 </div> 24 <div class="text" style="top: 231px;"> 25 <span class="stitle">震惊</span>关于金馆长那些high爆了的表情</div> 26 </div> 27 <div class="slide" style="left: 190px;"> 28 <a href="#"> 29 <img class="diapo" src="Images/6421206420111009170039010.gif" alt="" style="opacity: 0.8; 30 visibility: visible;"></a> 31 <div class="backgroundText" style="top: 232px;"> 32 </div> 33 <div class="text" style="top: 232px;"> 34 <span class="stitle">逆袭</span>金馆长的卖萌</div> 35 </div> 36 <div class="slide" style="left: 290px;"> 37 <a href="#"> 38 <img class="diapo" src="Images/6421206420111008161252052.gif" alt="" style="opacity: 0.8; 39 visibility: visible;"></a> 40 <div class="backgroundText" style="top: 232px;"> 41 </div> 42 <div class="text" style="top: 232px;"> 43 <span class="stitle">电影</span>《浪漫刺客》一样给力</div> 44 </div> 45 <div class="slide" style="left: 390px;"> 46 <a href="#"> 47 <img class="diapo" src="Images/6421206420111108160036015.jpg" alt="" style="opacity: 0.8; 48 visibility: visible;"></a> 49 <div class="backgroundText" style="top: 231px;"> 50 </div> 51 <div class="text" style="top: 231px;"> 52 <span class="stitle">劲敌</span>金馆长的那些表情界对手们</div> 53 </div> 54 <div class="slide" style="left: 490px;"> 55 <a href="#"> 56 <img class="diapo" src="Images/6421206420111101161354091.jpg" alt="" style="opacity: 0.8; 57 visibility: visible;"></a> 58 <div class="backgroundText" style="top: 230px;"> 59 </div> 60 <div class="text" style="top: 230px;"> 61 <span class="stitle">国产</span>与金馆长喜羊羊say"HI"</div> 62 </div> 63 </div> 64 <script src="Scripts/slider.js" type="text/javascript"></script> 65 <script type="text/javascript"> 66 slider.init(); 67 </script> 68 </body> 69 </html>
HTML Code
1 /* ==== slider nameSpace ==== */ 2 var slider = function() { 3 /* ==== private methods ==== */ 4 function getElementsByClass(object, tag, className) { 5 var o = object.getElementsByTagName(tag); 6 for ( var i = 0, n = o.length, ret = []; i < n; i++) { 7 if (o[i].className == className) ret.push(o[i]); 8 } 9 if (ret.length == 1) ret = ret[0]; 10 return ret; 11 } 12 function setOpacity (obj,o) { 13 if (obj.filters) obj.filters.alpha.opacity = Math.round(o); 14 else obj.style.opacity = o / 100; 15 } 16 /* ==== Slider Constructor ==== */ 17 function Slider(oCont, speed, iW, iH, oP) { 18 this.slides = []; 19 this.over = false; 20 this.S = this.S0 = speed; 21 this.iW = iW; 22 this.iH = iH; 23 this.oP = oP; 24 this.oc = document.getElementById(oCont); 25 this.frm = getElementsByClass(this.oc, 'div', 'slide'); 26 this.NF = this.frm.length; 27 this.resize(); 28 for (var i = 0; i < this.NF; i++) { 29 this.slides[i] = new Slide(this, i); 30 } 31 this.oc.parent = this; 32 this.view = this.slides[0]; 33 this.Z = this.mx; 34 /* ==== on mouse out event ==== */ 35 this.oc.onmouseout = function () { 36 this.parent.mouseout(); 37 return false; 38 } 39 } 40 Slider.prototype = { 41 /* ==== animation loop ==== */ 42 run : function () { 43 this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5; 44 this.view.calc(); 45 var i = this.NF; 46 while (i--) this.slides[i].move(); 47 }, 48 /* ==== resize ==== */ 49 resize : function () { 50 this.wh = this.oc.clientWidth; 51 this.ht = this.oc.clientHeight; 52 this.wr = this.wh * this.iW; 53 this.r = this.ht / this.wr; 54 this.mx = this.wh / this.NF; 55 this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1); 56 }, 57 /* ==== rest ==== */ 58 mouseout : function () { 59 this.over = false; 60 setOpacity(this.view.img, this.oP); 61 } 62 } 63 /* ==== Slide Constructor ==== */ 64 Slide = function (parent, N) { 65 this.parent = parent; 66 this.N = N; 67 this.x0 = this.x1 = N * parent.mx; 68 this.v = 0; 69 this.loaded = false; 70 this.cpt = 0; 71 this.start = new Date(); 72 this.obj = parent.frm[N]; 73 this.txt = getElementsByClass(this.obj, 'div', 'text'); 74 this.img = getElementsByClass(this.obj, 'img', 'diapo'); 75 this.bkg = document.createElement('div'); 76 this.bkg.className = 'backgroundText'; 77 this.obj.insertBefore(this.bkg, this.txt); 78 if (N == 0) this.obj.style.borderLeft = 'none'; 79 this.obj.style.left = Math.floor(this.x0) + 'px'; 80 setOpacity(this.img, parent.oP); 81 /* ==== mouse events ==== */ 82 this.obj.parent = this; 83 this.obj.onmouseover = function() { 84 this.parent.over(); 85 return false; 86 } 87 } 88 Slide.prototype = { 89 /* ==== target positions ==== */ 90 calc : function() { 91 var that = this.parent; 92 // left slides 93 for (var i = 0; i <= this.N; i++) { 94 that.slides[i].x1 = i * that.Z; 95 } 96 // right slides 97 for (var i = this.N + 1; i < that.NF; i++) { 98 that.slides[i].x1 = that.wh - (that.NF - i) * that.Z; 99 } 100 }, 101 /* ==== HTML animation : move slides ==== */ 102 move : function() { 103 var that = this.parent; 104 var s = (this.x1 - this.x0) / that.S; 105 /* ==== lateral slide ==== */ 106 if (this.N && Math.abs(s) > .5) { 107 this.obj.style.left = Math.floor(this.x0 += s) + 'px'; 108 } 109 /* ==== vertical text ==== */ 110 var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0; 111 if (Math.abs(v - this.v) > .5) { 112 this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px'; 113 this.v = v; 114 this.cpt++; 115 } else { 116 if (!this.pro) { 117 /* ==== adjust speed ==== */ 118 this.pro = true; 119 var tps = new Date() - this.start; 120 if(this.cpt > 1) { 121 that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0); 122 } 123 } 124 } 125 if (!this.loaded) { 126 if (this.img.complete) { 127 this.img.style.visibility = 'visible'; 128 this.loaded = true; 129 } 130 } 131 }, 132 /* ==== light ==== */ 133 over : function () { 134 this.parent.resize(); 135 this.parent.over = true; 136 setOpacity(this.parent.view.img, this.parent.oP); 137 this.parent.view = this; 138 this.start = new Date(); 139 this.cpt = 0; 140 this.pro = false; 141 this.calc(); 142 setOpacity(this.img, 100); 143 } 144 } 145 /* ==== public method - script initialization ==== */ 146 return { 147 init : function() { 148 // create instances of sliders here 149 // parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity 150 this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 80); 151 setInterval("slider.s1.run();", 16); 152 } 153 } 154 }();
JavaScript Code
1 /*顶部轮换*/ 2 #slider 3 { 4 position: relative; 5 width: 580px; 6 float: right; 7 padding-right: 20px; 8 height: 230px; 9 overflow: hidden; 10 background: #CCC; 11 border: 5px solid #CCC; 12 display: block; 13 } 14 #slider .slide 15 { 16 position: absolute; 17 top: 0px; 18 height: 230px; 19 width: 370px; 20 overflow: hidden; 21 border-left: #222 solid 1px; 22 cursor: default; 23 } 24 #slider .stitle 25 { 26 color: #F80; 27 font-weight: bold; 28 font-size: 1.2em; 29 margin-right: 1.5em; 30 text-decoration: none; 31 } 32 #slider .backgroundText 33 { 34 position: absolute; 35 width: 100%; 36 height: 100%; 37 top: 100%; 38 background: #000; 39 filter: alpha(opacity=40); 40 opacity: 0.5; 41 } 42 #slider .text 43 { 44 position: absolute; 45 top: 1%; 46 top: 100%; 47 color: #FFF; 48 font-family: verdana, arial, Helvetica, sans-serif; 49 font-size: 12px; 50 width: 320px; 51 left: 10px; 52 height: 70px; 53 overflow: hidden; 54 } 55 #slider .diapo 56 { 57 position: absolute; 58 filter: alpha(opacity=100); 59 opacity: 1; 60 visibility: hidden; 61 }
CSS CODE
有空上传一份源码
转载于:https://www.cnblogs.com/Chendaqian/p/3350209.html
使用纯生js实现图片轮换相关推荐
- 纯生js ajax,纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
- JS+Flash图片轮换/切换--上下滑动效果
这个效果与< Flash图片轮换/切换--左右推拉效果 >极类似,只是一个是左右,一个是上下. 同样,这个也是js+flash实现的.能够兼容性现行所有的浏览器. 可以设置标题的背景色与标 ...
- php中轮转图片js代码,js实现图片轮换效果代码
var numb = 0; var imgnumb = 1; function showimg() { //两张图片切换方法1 /*numb++; if (numb % 2 == 0) { docum ...
- 使用X-Slide.js实现图片轮换
这个js加入了改变文字颜色的属性 X-Slide.js修改版下载地址:http://download.csdn.net/detail/mg321/4970258 使用方法: 页面中引入jquery和X ...
- 前端原生js实现图片轮播效果,超级简单,备注详细
原生js实现简单轮播图,效果如下 纯生js实现轮播图 链接: link. 图片: 我们可以通过左右两边的箭头来播放图片,在我们的鼠标放在图片上时,自动播放结束,转化为手动播放,可以通过小圆点来点击切换 ...
- js图片轮换显示实例(转载)
2019独角兽企业重金招聘Python工程师标准>>> 转自:http://www.cnblogs.com/yes123/p/3702519.html 用js脚本实现图片轮换显示,很 ...
- 方格图片轮换JS特效
心血来潮想用js做个方格移动的图片轮换,于是捣鼓了小半天弄出来了.DEMO下载效果如下: 转载于:https://www.cnblogs.com/k13web/p/4139527.html
- 纯前端JS导出Word包含图片
纯前端JS导出Word包含图片 纯前端JS导出Word文档包含图片 Word导出方式 依赖 实现代码 纯前端JS导出Word文档包含图片 在做项目中,遇到一个需求,是将后台返回的属性以及URL图片导出 ...
- 图片纯前端JS压缩的实现
一.功能体验 先看demo:使用canvas在前端压缩图片并上传demo 如下截图: 点击文件选择框,我们不妨选一张尺寸比较大的图片,例如下面这种2M多的钓鱼收获照: 于是图片歘歘歘地传上去了: 此时 ...
- 腾讯《活着》频道JS图片轮换效果解析
腾讯<活着>频道JS图片轮换效果解析 1.原理分析 总析: 包含内容的层->宽:900 高:400 主要显示层-> 宽800 高400 即最上面那层 z-index=100 中 ...
最新文章
- 告别2019:属于深度学习的十年,那些我们必须知道的经典
- 显示在一行_使用基于Swift的一行代码自动显示Log,Network,CPU,RAM,FPS等
- Python格式化输出的三种方式
- HDU 3966-Aragorn's Story 树链剖分+树状数组
- Linux C函数之时间函数
- Apollo自动驾驶入门课程第⑧讲 — 规划(下)
- HCL打开显示当前系统用户怎么解决_Mac键盘突然停止响应怎么办?
- 沈抚示范区·“华为云杯”2021全国AI大赛圆满落幕
- 人人能上手:OpenAI发射初学者友好的强化学习教程 | 代码简约易懂
- php对象、面向对象
- python皮卡丘编程代码_儿童Python代码编程库Pygame Zero介绍
- extjs tree下拉列表_Extjs中ComboBoxTree实现的下拉框树效果(自写)_extjs
- 已知旋转矩阵求角度_解析几何|对称,平移和旋转
- 把“友商”装进芯里威联通运行黑群晖最新DSM系统
- wwwscan网站目录文件批量扫描工具
- 数学建模——层次分析法(Matlab)【评价类问题】
- libcef-详细步骤-将cef浏览器嵌入到Win32中作为子窗口运行
- linux bt速度快,linux bt速度之王—— rtorrent
- 运维派 企业面试题45 创建10个 用户 ; ping探测主机是否在线
- Linux-网络命令
热门文章
- JavaScript权威指南--chapter 8函数
- ivew select组件 DatePicker组件的清空
- jquery实现同时展示多个tab标签+左右箭头实现来回滚动
- js中获取时间new date()的用法和获取时间戳
- 【系统架构】缓存Memcache 使用原子性操作add,实现并发锁
- c++写一个类后编译发现class重定义
- .NET中利用XML来自动生成代码策略
- C++自定义函数类型——typedef的使用
- 2018.08.22 NOIP模拟 string(模拟)
- /etc/profile、~/.bash_profile、~/.bashrc和/etc/bashrc