JS 仿淘宝幻灯片 非完整版 小案例
仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>4.淘宝幻灯片</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-11 --> 10 <style> 11 *{margin:0;padding:0} 12 #div1{width:400px;height:215px; border:1px solid red;margin:40px auto; overflow:hidden;position:relative } 13 ul{position:absolute;left:0;top:0} 14 li{list-style:none;float:left; position: relative} 15 li.active{background:red} 16 li.active2{border:1px solid red} 17 li img{width:400px;} 18 ol{position:absolute} 19 ol li{width:15px;height:15px;border-radius:10px;background:#808080;margin:0 3px} 20 .t{position:absolute;font-size:80px;z-index:2;left:200px;top:100px;color:red;width:100px;height:100px;background:#fff;text-align:center; border:1px solid black} 21 </style> 22 <script> 23 window.onload=function(){ 24 var oDiv1=document.getElementById('div1'); 25 var oUl=oDiv1.getElementsByTagName('ul')[0]; 26 var aLi=oUl.getElementsByTagName('li'); 27 var arr=['3-images/1.jpg','3-images/2.jpg','3-images/3.jpg','3-images/4.jpg','3-images/5.jpg']; 28 var arr1=['1','2','3','4','5']; 29 oUl.style.width = aLi.length * aLi[0].offsetWidth +'px'; 30 31 var oL=document.createElement('ol'); 32 var str=''; 33 for( var i=0;i<aLi.length;i++ ){ 34 35 str += '<li></li>' 36 } 37 oL.innerHTML=str; 38 oDiv1.appendChild( oL ); 39 document.title = oDiv1.offsetWidth +'-'+oL.offsetWidth; 40 oL.style.left = (oDiv1.offsetWidth - oL.offsetWidth)/2 +'px'; 41 oL.style.bottom='0px'; 42 var aLi1=oL.getElementsByTagName('li'); 43 44 var timer=null; 45 var num=0; 46 47 function init(){ 48 for(var i=0;i<aLi1.length;i++){ 49 aLi1[i].className='' 50 } 51 aLi1[num].className='active' 52 } 53 init(); 54 function slide(){ 55 num++; 56 if(num>=aLi.length) { 57 num=0; 58 oUl.style.left = 0; 59 } 60 init(); 61 hcMove(oUl,{ 62 'left':-400*num 63 }) 64 } 65 timer=setInterval(function(){ 66 slide() 67 },1000) 68 69 oDiv1.onmouseover=function(){ 70 clearInterval(timer) 71 } 72 oDiv1.onmouseout=function(){ 73 timer=setInterval(function(){ 74 slide() 75 },1000) 76 } 77 for(var i=0;i<aLi.length;i++){ 78 aLi1[i].index=i; 79 aLi1[i].onclick=function(){ 80 num = this.index; 81 init(); 82 hcMove(oUl,{'left':-400*num}) 83 } 84 } 85 86 87 88 } 89 function css(obj,attr) { 90 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr] 91 } 92 /**完美 缓冲运动 带opacity**/ 93 function hcMove(obj,json,fn){ 94 clearInterval( obj.timer ); 95 96 obj.timer=setInterval(function(){ 97 var iBtn=true; 98 99 for(var attr in json){ 100 var target=json[attr]; 101 102 if( attr == 'opacity' ){ 103 var iSpeed = (target-Math.round(css(obj,attr))*100)/6; 104 }else{ 105 var iSpeed = (target-parseInt(css(obj,attr)))/6; 106 } 107 108 109 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//速度取整,因为js中的小数是经过计算的,默认四舍五入,但是不够0.5的就不会动了 110 111 if( parseInt(css(obj,attr)) != target ){ 112 iBtn=false;//如果有运动没到达目标点,iBtn为false 113 114 if( attr == 'opacity' ){ 115 var sNow=Math.round(css(obj,attr)*100) + iSpeed; 116 117 //先做处理 再赋值 118 if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){ 119 sNow = target 120 } 121 122 obj.style[attr] = sNow/100; 123 obj.style.filter = 'alpha(opacity='+sNow+')'; 124 }else{ 125 126 var sNow = parseInt(css(obj,attr)) + iSpeed; 127 128 //先做处理 再赋值 129 if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){ 130 sNow = target 131 } 132 obj.style[attr] = sNow +'px'; 133 } 134 135 } 136 137 } 138 139 if(iBtn){ //如果运动全部完成,iBtn为true 140 clearInterval(obj.timer); 141 fn && fn() 142 } 143 144 },30) 145 } 146 147 </script> 148 </head> 149 <body> 150 <div id="div1"> 151 <ul> 152 <li mars='1'><img src="3-images/1.jpg"><span class="t">1</span></li> 153 <li mars='2'><img src="3-images/2.jpg"><span class="t">2</span></li> 154 <li mars='3'><img src="3-images/3.jpg"><span class="t">3</span></li> 155 <li mars='4'><img src="3-images/4.jpg"><span class="t">4</span></li> 156 <li mars='5'><img src="3-images/5.jpg"><span class="t">5</span></li> 157 </ul> 158 </div> 159 </body> 160 </html>
View Code
转载于:https://www.cnblogs.com/webskill/p/4159371.html
JS 仿淘宝幻灯片 非完整版 小案例相关推荐
- JS仿淘宝网顶部的导航菜单
代码简介: JS仿淘宝网顶部的导航菜单.整合了购物车,收藏夹,搜索,搜索,网站导航等功能的导航. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- js仿淘宝主图放大镜功能
js仿淘宝主图放大镜功能 演示地址 下载地址
- 【每日一练】原生js仿淘宝主图放大镜功能,附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
- 最新仿淘宝B站购物直播小程序+带货完整PHP源码下载
正文: 最新仿淘宝B站购物直播小程序+带货完整PHP源码下载,由于演示图太长了,所以我分别载图了两张,完整的演示图直接发压缩包了,有兴趣自行去查看. 当前版本已经修复直播间相关的一些BUG,还有商品新 ...
- JS仿淘宝关闭二维码案例
点击关闭按钮可以实现二维码的关闭功能 <!DOCTYPE html> <html lang="en"><head><meta charse ...
- 仿淘宝电商官网静态页面(HTML+CSS+JS)+ 常见布局解析,学会如果做是关键!
仿淘宝电商官网静态页面 作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它 这是我刚"入坑"的时候写的Demo,因为当 ...
- js: 动画 筋斗云导航栏 仿淘宝关闭二维码
筋斗云导航栏 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
- 使用WEX5移动开发工具制作仿淘宝APP
毕业设计-使用WEX5移动开发工具制作仿淘宝APP 系统设计的意义 本课题来源于对日常逛超市.购物的生活体验和指导老师的提示.本系统是基于 WeX5的仿淘宝App系统,它商家们提供了一个更广阔的商品推 ...
- jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
最新文章
- word表格自动编号
- 神不知鬼不觉地置换 XP用户密码
- 4.Spring Cloud Alibaba教程:Nacos配置管理
- 简单有效提升服务器性能,4个简单操作,让你的服务器性能飞速提升!
- 如何快速解决虚拟机中的CentOS7无法上网的方式
- GitHub/Git 使用
- 登录方式2:windows命令行
- 鸿蒙之下5怎么跳城池,鸿蒙之空间道尊
- pyqt5 获取Qlabel中的图片并对其进行处理(包括Qimage转换为Mat)
- 如何让电脑开机自启动程序
- Web API 源码剖析之默认消息处理程序链之路由分发器(HttpRoutingDispatcher)
- 期刊分类abcde_收藏!中文顶级期刊分类,多图教你不被ABCD类搞晕!
- 告“抄袭”花粥做号露露们,内容创业赛道的得利者,也是牺牲品
- html中加分割线,多种HTML分割线
- 路由器映射,端口映射?
- Android 广播(Broadcast)
- java 条件编译_Java条件编译:如何防止代码块被编译?
- 1000卡路里计算器_Excel卡路里燃烧计算器
- 8421码,5421码,2421码和余3码的分类及转换
- 文档模式:标准模式、混杂模式
热门文章
- 渗透测试攻击(二)——wireshark过滤数据包语法详解
- 软件_linux命令cp目录路径和通配符
- vnpy学习10_常见坑
- 读书笔记_量化交易如何建立自己的算法交易04
- matlab将txt数据分类,MATLAB读取txt文件,txt里面有字符串和数值两种类型
- python cmdb_python相关cmdb系统
- matlab 查找脉冲产生时间,脉冲时间信号MATLAB表示
- java发送html附件_Java发送邮件(图片、附件、HTML)
- postgresql 连接超时_关于超时:如何自动关闭PostgreSQL中的空闲连接?
- resnet50代码_十余行代码完成迁移学习,百度PaddleHub实战解读