原生js自适应宽度焦点图切换_自适应焦点图切换代码

特别声明:商业模板免费提供模板范畴内咨询指导,包含安装说明文档; 支持付费安装、修改、定制等增值服务。

  • 产品详情
  • 购前须知
  • 售后服务

产品链接:

温馨提示:若您对这款产品比较感兴趣,不要等!请直接复制下方链接发送给我们详情>>

下载地址:

您当前仅余¥0下载券
下单后,即可查看
  • 付费会员享VIP建站专区免费下载特权
  • 每天最多可下载30个
  • 免费提供技术支持
  • 赠精品网站运营手册

产品简介:

CSS

<link type="text/css" href="css/style.css" rel="stylesheet">

JS

<script type="text/javascript">
(function(){
	if(!Function.prototype.bind){
		Function.prototype.bind = function(obj){
			var owner = this,args = Array.prototype.slice.call(arguments),callobj = Array.prototype.shift.call(args);
			return function(e){e=e||top.window.event||window.event;owner.apply(callobj,args.concat([e]));};
		};
	}
})();
var banner_tabs = function(id){
	this.ctn = document.getElementById(id);
	this.adLis = null;
	this.btns = null;
	this.animStep = 0.2;//动画速度0.1~0.9
	this.switchSpeed = 6;//自动播放间隔(s)
	this.defOpacity = 1;
	this.tmpOpacity = 1;
	this.crtIndex = 0;
	this.crtLi = null;
	this.adLength = 0;
	this.timerAnim = null;
	this.timerSwitch = null;
	this.init();
};
banner_tabs.prototype = {
	fnAnim:function(toIndex){
		if(this.timerAnim){window.clearTimeout(this.timerAnim);}
		if(this.tmpOpacity <= 0){
			this.crtLi.style.opacity = this.tmpOpacity = this.defOpacity;
			this.crtLi.style.filter = 'Alpha(Opacity=' + this.defOpacity*100 + ')';
			this.crtLi.style.zIndex = 0;
			this.crtIndex = toIndex;
			return;
		}
		this.crtLi.style.opacity = this.tmpOpacity = this.tmpOpacity - this.animStep;
		this.crtLi.style.filter = 'Alpha(Opacity=' + this.tmpOpacity*100 + ')';
		this.timerAnim = window.setTimeout(this.fnAnim.bind(this,toIndex),50);
	},
	fnNextIndex:function(){
		return (this.crtIndex >= this.adLength-1)?0:this.crtIndex+1;
	},
	fnSwitch:function(toIndex){
		if(this.crtIndex==toIndex){return;}
		this.crtLi = this.adLis[this.crtIndex];
		for(var i=0;i<this.adLength;i++){
			this.adLis[i].style.zIndex = 0;
		}
		this.crtLi.style.zIndex = 2;
		this.adLis[toIndex].style.zIndex = 1;
		for(var i=0;i<this.adLength;i++){
			this.btns[i].className = '';
		}
		this.btns[toIndex].className = 'cur'
		this.fnAnim(toIndex);
	},
	fnAutoPlay:function(){
		this.fnSwitch(this.fnNextIndex());
	},
	fnPlay:function(){
		this.timerSwitch = window.setInterval(this.fnAutoPlay.bind(this),this.switchSpeed*1000);
	},
	fnStopPlay:function(){
		window.clearTimeout(this.timerSwitch);
	},
	init:function(){
		this.adLis = this.ctn.getElementsByTagName('li');
		this.btns = this.ctn.getElementsByTagName('cite')[0].getElementsByTagName('span');
		this.adLength = this.adLis.length;
		for(var i=0,l=this.btns.length;i<l;i++){
			with({i:i}){
				this.btns[i].index = i;
				this.btns[i].onclick = this.fnSwitch.bind(this,i);
				this.btns[i].onclick = this.fnSwitch.bind(this,i);
			}
		}
		this.adLis[this.crtIndex].style.zIndex = 2;
		this.fnPlay();
		this.ctn.onmouseover = this.fnStopPlay.bind(this);
		this.ctn.onmouseout = this.fnPlay.bind(this);
	}
};
var player1 = new banner_tabs('banner_tabs');
</script>

最高¥2000红包
限量
云产品通用,可叠加官网常规优惠使用 | 限时领取
建站教程

Discuz!X3.4应用中心安装任意的插件或者模板提示“数据无法识别,请返回”的解决方法

阅读 45

在Discuz应用中心安装任意的插件或者模板提示“数据无法识别,请返回”解决教程 可能原因一:应用中心启用...博文来自:技术博客

DiscuzX 3.4 R20191201主要更新加入并完善H5文件上传功能,完善MySQL 8的支持

阅读 49

本次release v3.4-20191201 距离上次0917版本75天,共合并了36个PR,感谢社区的努力与贡献。 打包文件下...博文来自:技术博客

Discuz! 社区论坛在消失的这几个月里,已经被 DNSPOD 和 腾讯云 所接纳,并进行全新…

阅读 54

Discuz! 社区论坛在消失的这几个月里,已经被 DNSPOD 和 腾讯云 所接纳,并进行全新的 Discuz!Q 版本研...博文来自:技术博客

DESTOON B2B网站快速找回管理员密码方法

阅读 63

1、如果系统开启了邮件或短信发送,可以通过前台的找回密码功能邮件或短信找回。 2、使用数据库管理工具...博文来自:技术博客

开发手册

微擎新版开发手册,微擎数据库表开发手册

阅读 62

微擎数据库表 account 平台账号表(公众号、小程序、PC等) account_aliapp 支付宝小程序表 account_bai...博文来自:技术博客

WordPress最新版开发手册,涵盖WordPress主题开发、WordPress插件开发

阅读 70

据统计这是使用WordPress开发网站的企业和站长都会用到的技术手册,涵盖WordPress主题开发、WordPress插...博文来自:技术博客

DedeCMS织梦V5.7SP2正式版开发手册

阅读 578

织梦CMS是集简单、健壮、灵活、开源几大特点的开源内容管理系统,是国内开源CMS的领先品牌,目前程序安装...博文来自:技术博客

Discuz! X3.0/Discuz! X3.2/Discuz! X3.4完整版开发手册

阅读 295

Discuz!是全球市场占有率第一的社区论坛(BBS)软件,在使用Discuz! 系统开发网站的时候我们会使用到以下...博文来自:技术博客

10秒发布需求 获取报价及方案
手机号码
需求

建站怕上当?问问靠谱的人

建站顾问 NAZ-小溪

(十年建站行业经验)

扫码加好友

与顾问在线聊

24小时咨询网站建设疑问,更有10000套精品建站案例

NAZ.CN 从零开始学建站,学习技能、解决问题!

每个月,我们帮助开发者解决各种各样的技术问题。并助力他们在技术能力上获得提升。
没有账号? 忘记密码?

社交账号快速登录