博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
模仿支付宝banner平铺浏览器设计效果(自由创建按钮序列)
阅读量:5026 次
发布时间:2019-06-12

本文共 2223 字,大约阅读时间需要 7 分钟。

	

  

function SlideBanner(obj){		this.bannerBox=obj;		this.bannerList=$("ul li",obj);		this.setImgBg();		var _this_=this;		if(this.bannerList.size()>1){//当banner图数量大于1的时候才序列对应的按钮			this.t=null;			this.t2=null;			this.loop=0;			this.btnDivBox=$("
"); this.addButtons(); this.autoPlay(); this.bannerBox.hover(function(){ window.clearInterval(_this_.t2); },function(){ _this_.autoPlay(); }); }; }; SlideBanner.prototype={ preLoadImg:function(url,callBack){//判断图片是否加载完成 var img=new Image(); if(!!window.ActiveXObject){ img.onreadystatechange=function(){ if(this.readyState=="complete"){ callBack(); }; }; }else{ img.οnlοad=function(){ callBack(); }; }; img.src=url; }, setImgBg:function(){//设置背景图片 var _this=this; this.bannerList.each(function(i,o){ //当背景图片载入完成后才设置到背景里面 _this.preLoadImg($(o).attr("data-img"),function(){ $(o).css("backgroundImage","url("+$(o).attr("data-img")+")"); }); }); }, addButtons:function(){ var _this=this,w=19*this.bannerList.size(); this.btnDivBox.width(w).css("marginLeft",-w/2+"px"); this.bannerList.each(function(i,o){ _this.btnDivBox.append(""); }); this.bannerBox.append(this.btnDivBox); this.btnDivBox.children().eq(0).addClass("current").end().mouseover(function(e){ e.stopPropagation(); var $this=this; _this.t=window.setTimeout(function(){ if(!$($this).hasClass("current")){ _this.changeStyle($this); }; },200); }).mouseout(function(){ window.clearTimeout(_this.t); }); }, changeStyle:function(thisObj){ var i=$(thisObj).index(); this.bannerList.hide().eq(i).fadeIn(); this.btnDivBox.children().eq(i).addClass("current").siblings().removeClass("current"); this.loop=i; }, autoPlay:function(){ var _this=this; this.t2=window.setInterval(function(){ if(_this.loop==_this.bannerList.size()-1){ _this.loop=-1; }; _this.loop++; _this.btnDivBox.children().eq(_this.loop).mouseover(); },5000); } };

  

$(function(){		var s=new SlideBanner($("#SlideBannerBox"));		});    

  

转载于:https://www.cnblogs.com/yangliulang/archive/2013/03/18/2966117.html

你可能感兴趣的文章
块级、内联、内联块级
查看>>
Predicate
查看>>
[面试题记录01]实现一个function sum达到一下目的
查看>>
这个季节的忧伤,点到为止
查看>>
mysql通过配置文件进行优化
查看>>
省级网站群建设关注点
查看>>
工作第四天之采集资源
查看>>
innobackupex 在增量的基础上增量备份
查看>>
Windows Server 2012 R2 DirectAccess功能测试(2)App1服务器安装及配置
查看>>
基于清单的启动器的实现
查看>>
外网用户通过citrix打印慢的解决方法
查看>>
STL容器的使用
查看>>
关于std::map
查看>>
JXL导出Excel文件兼容性问题
查看>>
VBoot1.0发布,Vue & SpringBoot 综合开发入门
查看>>
centos7 安装wps 后 演示无法启动
查看>>
git简单命令
查看>>
LAMP编译部署
查看>>
XenDesktop7.6安装部署入门教程
查看>>
HashMap的工作原理及HashMap和Hashtable的区别
查看>>