原生幻灯片封装学习
2018-11-02 08:50:26来源:博客园 阅读 ()
JavaScript部分
(function(window,document) { var Broadcast = function(cla,options) { // 判断是用函数创建的还是用new创建的。这样我们就可以通过Broadcast("dom") 或 new Broadcast("dom")来使用 if (!(this instanceof Broadcast)) return new Broadcast(cla, options); // 排序图片的层叠位置 var front = this.nameclass(cla),//获取的class元素组 img = this.childer(front), imglength = img.length, jishu = 0, _this = this,intr; for (var r in img) { if (r == 0) { img[r].style.cssText= 'z-index:' + (imglength - r) + ';position:absolute;opacity:1;transition:0.5s;'; } else { img[r].style.cssText= 'z-index:' + (imglength - r) + ';position:absolute;opacity:0;transition:0.5s;'; } } //设置选择器 if(options.spot=="true"){ if(options.Selector!=undefined){ for(var i=0;i<imglength;i++){ var domspan = document.createElement('span'); if(i==0){ domspan.setAttribute('class',options.current) } this.nameclass(options.Selector)[0].appendChild(domspan) } } } var spotdom = this.nameclass(options.Selector)[0].children; // 给选择器添加点击事件 for(var y=0;y<spotdom.length;y++){ spotdom[y].index = y; if(y!=0){ spotdom[y].setAttribute('class',''); } spotdom[y].onclick=function(){ this.setAttribute('class',options.current) jishu=this.index; _this.Front(img,jishu,spotdom); } } // 给两个箭头绑定点击事件 if(options.leftarrow!=undefined&&options.rightarrow!=undefined){ this.nameclass(options.leftarrow)[0].onclick=function(){ if(jishu==0){ jishu=imglength-1 }else{ jishu-- } _this.Front(img,jishu,spotdom); } this.nameclass(options.rightarrow)[0].onclick=function(){ if(jishu==imglength-1){ jishu=0; }else{ jishu++ } _this.Front(img,jishu,spotdom); } } // 自动播放 var bof = function(){ intr = setInterval(function() { if(img.length-1==jishu){ jishu=0; }else{ jishu++ } _this.Front(img,jishu,spotdom) }, 2000); } bof(); // 鼠标经过停止 front[0].onmouseover = function(){ intr = clearInterval(intr); } // 鼠标离开播放 front[0].onmouseout = function(){ bof(); } } Broadcast.prototype = { nameclass: function(mingzi) { //获取class元素组 var obj = []; var jia = 0; var dom = document.getElementsByTagName('*'); for (var i in dom) { if (dom[i].nodeType == 1) { if (dom[i].getAttribute('class') === mingzi) { obj[jia] = dom[i]; jia++ } } } return obj; }, childer: function(father,name) { //获取子集元素组 var obj2 = [], j = 0; var dom = father[0].children[0].childNodes; for (var h in dom) { if (dom[h].nodeType == 1) { obj2[j] = dom[h]; j++ } } return obj2; }, Front: function(dom2,cishu,xuan) { var dom2length = dom2.length; for (var r in dom2) { if (r == cishu) { dom2[r].style.opacity='1'; xuan[r].setAttribute("class",'current-dan') } else { dom2[r].style.opacity='0'; xuan[r].setAttribute("class",'') } } } } // 暴露方法 window.Broadcast = Broadcast; })(window, document);
HTML结构部分
<div class="boy"> <div class="img-box"> <a href="" title="" ><img src="img/timg(1).png" alt=""></a> <a href="" title="" ><img src="img/timg(2).png" alt=""></a> <a href="" title="" ><img src="img/timg(3).png" alt=""></a> <a href="" title="" ><img src="img/timg.png" alt=""></a> </div> <div class="selector"></div> <div class="left-att"><</div> <div class="right-att">></div> </div>
CSS部分
.boy{ width: 1103px; margin: 0 auto; height: 714px; position: relative; } .img-box{ height: 714px; } .img-box a{ float: left; } /* 设置圆点的样式 */ .selector{ width: 96px; position: absolute; left: 50%; margin-left: -48px; bottom: 20px; z-index: 222; } .selector span{ float: left; margin-left: 10px; border-radius: 100px; background-color: #999; width: 14px; height: 14px; cursor: pointer; } .selector .current-dan{ background-color: #13af13; } /* 设置箭头的位置 */ .left-att{ position: absolute; left: 20px; margin-top: -20px; top: 50%; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 40px; font-weight: bold; z-index: 222; cursor: pointer; } .right-att{ position: absolute; right: 20px; margin-top: -20px; top: 50%; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 40px; font-weight: bold; cursor: pointer; z-index: 222; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- js插件实现图片滑动验证码 2020-01-17
- 原生js实现图片懒加载+加入节流 2019-08-14
- 用原生JS写省市二级联动 2019-08-14
- vue学习【一】vue引用封装echarts并展示多个echarts图表 2019-08-14
- 三、VUE项目BaseCms系列文章:axios 的封装 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash