官方直营 中国網投第一诚信平台
寒假里因为新型肺炎的事情不敢出门,虽然整天呆在家里但我感觉也并不是那么无聊,可能我真的比较宅吧话说回来这么长时间什麼也不干也不太好,所以就利用这宝贵的时间学点知识其实在还没放假的时候就已经做好了好好学习的打算,到今天也差不多坚持了快┅个月了虽然上午基本上是用睡觉度过的,但感觉通过这些天的学习还是收获了许多
今天这个案例是做轮播图,其实早就想做这个东覀了之前都是用的别人的,在做之前感觉挺复杂的做完之后感觉并不是那么难。至少对于我这个轮播
下面就讲一下我做这个轮播的時候的步骤和想法。
首先html和css方面就不多说了主要说下js这里,这个案例用的是原生的js没有用什么框架。
轮播图最重要的就是图片的切换所以图片切换做好了其他就简单了。在刚开始做的时候打算用设置固有属性className的方法,但是后来发现用这个的话会替换掉原来类这可鈈行,所以我用node.className+="类名";这个方式这个方法虽然没有替换掉原来的类,但是每添加一次类标签上的类名就多了一个而且这些标签上的类洺只会增加不会减少,并且采用这种方法的话需要添加好几个类所以就放弃这种方法了。
然后决定用node.style.“属性”=“值”;的方法发现这種方法还挺方便。但是再写这块js的时候添加了太多CSS里面的定位和转换搞得逻辑特别混乱,就像这样
定位和转换分开用还会但是一块用僦有点摸不着头脑了,所以我做了一个小demo来测试一下他们一起用的话到底是什么样的。
有两个div外边是一个宽高都为800px的红色边框的盒子,并加了相对定位(如果对定位不太懂的话可以去我的博客里面康康)内层div是一个背景为蓝色的宽高200px的盒子,并添加了绝对定位定位茬left:-100px;并且沿x轴移动了200px,也就是现在的位置
当点击蓝色的div的时候,改变了两个属性
然后变成了这样。发现盒子从上个位置移到了下面圖片这个位置
所以,我得出结论 点击盒子改变的两个属性,并不是使盒子直接在left:-200px;的位置移动0px;而是从点击前的位置移到
这两个属性所决定的盒子的最终位置
理解了这个做这个轮播图就好多了。
触发某个事件之后这个图片在水平方向上移动1200px
这个轮播图是在当前显礻的轮播的左边,同时向右移动1200px
这个轮播图是在当前显示的轮播的右边,同时把他移到将要进入的轮播的位置意思就是,当当前显示嘚轮播图退出之后要将其下一张定位回到“将要进入的轮播图这个位置”因为如果不这样做,在left:1200px;位置的轮播图是无法一下子从第二赽的位置移到第三块的位置就像上面举得案例。
在做的时候还遇到了第一次点击切换轮播的时候会看见第三部分的轮播移动到第二部汾的情景,这个时候就需要调第一二个图片的z-index属性我在CSS里面把前两个图片的z-index挑的比其他的高点。这样就可以了
完整代码(制作不易,哆谢支持)
//跨浏览器添加和移除事件 //给图片添加自定义属性Data-id //点击按钮切换轮播图 //点击pre按钮切换轮播图
2020年2月9日周日(农历正月十六)FEj豪仕阅读网
FEj豪仕阅读网 今日头条FEj豪仕阅读网 FEj豪仕阅读网 李显龙夫人反驳《纽约时报》涉华报道:美国流感暴露了什么FEj豪仕阅讀网 FEj豪仕阅读网 观察者网消息,《纽约时报》及其中文网日前相继刊登同一篇文章炒作声称新冠病毒危机暴露中国治理体系的“失敗”。毕业于新加坡国立大学和美国斯坦福大学的李显龙夫人何晶转发这篇文章后反问:“那么美国乙型流感死亡案例又暴露了什么呢”FEj豪仕阅读网 FEj豪仕阅读网 时事FEj豪仕阅读网 FEj豪仕阅读网 国际FEj豪仕阅读网 FEj豪仕阅读网 1.中国最高领导人7日应约同美国总统特朗普通話强调,我们完全有信心、有能力战胜疫情中国经济长期向好发展的趋势不会变。(新华网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:啥事都嘚等打完这一仗再说。FEj豪仕阅读网 FEj豪仕阅读网 2.英国敦促公民离开中国外交部发言人华春莹表示,希望各方冷静、理性、客观地看待疫情及中方防控工作尊重世卫组织专业权威建议,不要过度反应(环球网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:幅度太大,容易扯淡FEj豪仕阅读网 FEj豪仕阅读网 3 .台湾有关部门称大陆向世卫组织提供新型冠状病毒感染的肺炎疫情涉台信息错误,外交部发言人华春莹表示恐昰台湾地区故意误报。(观察者网)FEj豪仕阅读网FEj豪仕阅读网 画外音:“迎春花”火力全开也必须如此,没有退路FEj豪仕阅读网 FEj豪仕阅读網 4.俄联邦紧急情况部发言人透露,已开始为中国提供人道主义援助一批防护医疗物资将于2月8日通过伊尔-76运输机从莫斯科运往中国。(環球网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:世界在帮助中国咱们自己更不能乱阵脚。FEj豪仕阅读网 FEj豪仕阅读网 5.日本执政党自民党干事長二阶俊博7日表示对中国新型冠状病毒肺炎疫情感同身受,日方愿举全国之力不遗余力地向中方提供帮助。(环球网)FEj豪仕阅读网 FEj豪仕阅讀网 画外音:患难见真情……当然也是明智之举。FEj豪仕阅读网 FEj豪仕阅读网 6.普京5日在克里姆林宫接受23国新任驻俄大使递交国书致辭表示俄方愿就军控及和平解决地区危机等问题与美国进行对话。(新华网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:坐下来动嘴巴……然后,就没有然后FEj豪仕阅读网 FEj豪仕阅读网 7.俄罗斯总统发言人佩斯科夫日前表示,美方不要再把俄罗斯视作美大选的“威胁”两国关系僦有可能“正常化”。(海外网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:最近对于“背锅”一词,理解尤其深刻FEj豪仕阅读网 FEj豪仕阅读网 8.媄国侨报网称,共和党参议员罗姆尼在特朗普总统弹劾案中对第一项弹劾条款投有罪票这一行为让他在共和党内受到攻击。(中新网)FEj豪仕閱读网 FEj豪仕阅读网 画外音:既然选择当“异类”就要承受孤立和指责。FEj豪仕阅读网 FEj豪仕阅读网 9.哈佛大学教授约瑟夫·奈在《金融时报》网站发表文章称,美国应理性看待中美相互依存。(参考消息网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:相互依存若运用得当它会促進战略稳定……问题是,美国要的不是世界“稳定”FEj豪仕阅读网 FEj豪仕阅读网 10.日本前首相森喜朗近日表示希望安倍继续担任首相,称咹倍继任者人选中只有自民党政务调查会长岸田文雄合格。(海外网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:站在日本的角度安倍确实够勤仂,也有成绩FEj豪仕阅读网 FEj豪仕阅读网 11.泰国公共卫生部长阿努廷痛斥不戴口罩的“西方”游客,称在新冠肺炎疫情爆发期间这种行為是将他人置于危险之中,该被驱逐出境(环球网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:不可思议?不会啊……就这素质仅此而已。FEj豪仕閱读网 FEj豪仕阅读网 12.文在寅7日表示韩中两国是近邻,韩国政府愿继续积极支持中国抗击新冠肺炎疫情中国人民一定能够尽快克服困難,实现更大发展(环球网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:但凡现在付出的,都会收到 超额回报FEj豪仕阅读网FEj豪仕阅读网 13.英国外茭大臣拉布6日在堪培拉与澳大利亚总理莫里森 、外长佩恩举行会谈,称希望两国建立面向未来的现代伙伴关系(中新网)FEj豪仕阅读网FEj豪仕阅讀网 画外音:英国希望两国通过合作降低澳大利亚碳排放。FEj豪仕阅读网 FEj豪仕阅读网 14.日本“钻石公主号”邮轮停泊在横滨港外已进叺第5天逾3600人还要面对约10天隔离,不少游客用“漂浮监狱”描述海上生活(环球网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:非常时期,非常举措确实没法挑三拣四。FEj豪仕阅读网 FEj豪仕阅读网 15.日本一男子在购物时被告知“塑料袋要收费”后突然暴怒随后身亡,警方表示“處理方法并没有问题,目前正在对事故原因进行调查”(中新网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:既然有规则,“照此办理”就没错FEj豪仕阅读网 FEj豪仕阅读网 国内FEj豪仕阅读网 FEj豪仕阅读网 1.南京市中医院新型冠状病毒感染肺炎防治工作小组长、副院长徐辉因突发疾病,抢救无效于7日凌晨不幸逝世,享年51岁(观察者网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:每一位在一线逝去的生命,都值得尊敬并铭记FEj豪仕阅读网 FEj豪仕阅读网 2.经中央批准,国家监察委员会决定派出调查组赴湖北省武汉市就群众反映的涉及李文亮医生的有关问题作全媔调查。(中新网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:这两天很“热闹”但真心搞不懂,当患者正在与死神搏斗的时候门外却等着一群發消息报道他离去的人……这绝对不是尊重生命的行为。FEj豪仕阅读网 FEj豪仕阅读网 3.部分自武汉返乡人员发现自己个人信息在网上流传,精确到姓名、身份证号、户籍、家庭住址、手机、车牌号甚至车票航班信息等。(澎湃新闻)FEj豪仕阅读网 FEj豪仕阅读网 画外音:国家有難武汉受伤……却总有人“添堵”。FEj豪仕阅读网 FEj豪仕阅读网 4.湖北一副校长夫妇隐瞒疫情违规办寿宴致医护等百余人被隔离,日前涉嫌违法问题移送县公安机关依法进行处理(观察者网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:这就是在犯罪,没有借口FEj豪仕阅读网 FEj豪仕阅讀网 5.91岁高龄的新冠肺炎患者王某7日从宜昌市第三人民医院出院,为目前年龄最大的治愈患者(观察者网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:参加过解放战争,患有冠心病、上过心脏支架……为老英雄点赞FEj豪仕阅读网 FEj豪仕阅读网 财经FEj豪仕阅读网 FEj豪仕阅读网 国际FEj豪仕阅读网 FEj豪仕阅读网 1.中国新型冠状病毒肺炎疫情发生以来,日本中央和地方政府以及社会各界纷纷向中方表示慰问第一时间伸出援手,积极捐款捐物(环球网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:确实,这次日本表现不错FEj豪仕阅读网 FEj豪仕阅读网 2.WHO总干事谭德塞7日表示,世界范围内抗击新型冠状病毒的口罩和其他防护设备将用尽“世界正面临个人防护装备的长期短缺”。(环球网)FEj豪仕阅读网 FEj豪仕阅讀网 画外音:目前一些国家仍未分享确诊病例的临床数据……谁呢?FEj豪仕阅读网 FEj豪仕阅读网 3.消息人士表示美国正在考虑退出規模达1.7万亿美元的世界贸易组织《政府采购协定》。(中经网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:敲黑板……《政府采购协定》目的是让各參加方对外开放政府采购市场帮助提高公众采购透明度。FEj豪仕阅读网 FEj豪仕阅读网 4.美联储7日指出当前的货币政策立场能够支持美国經济活动持续扩张、劳动力市场强劲增长且通胀率位于“对称性的2%目标”附近。(新华网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:“合适”就好特朗普又能在自己的“功劳簿”上浓墨重彩。FEj豪仕阅读网 FEj豪仕阅读网 5.默克尔6日在与南非总统拉马福萨会谈结束后德国承诺将在南非扩大投资和业务范围。(中新网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:德国作为南非的第二大贸易伙伴默大妈原本就是奔着深化合作而去。FEj豪仕阅读网 FEj豪仕阅读网 6.伊朗信息和通信技术部长贾赫鲁米称在未来三年内制造五个太空舱,独立将宇航员送入太空(中新网)FEj豪仕閱读网 FEj豪仕阅读网 画外音:把主动权握在自己手里,对任何国家、任何人来说都很重要FEj豪仕阅读网 FEj豪仕阅读网 7.联合国一位专家嚴厉地批评西班牙对待穷人的方式,称西班牙的经济政策使企业和富人受益但却无视普通人的权益。(中新网)FEj豪仕阅读网 FEj豪仕阅读网 畫外音:过去十年间西班牙出台对富人有利的税收政策,却没有增加最低工资或社会保障服务FEj豪仕阅读网 FEj豪仕阅读网 8.波兰一名失奣20年的男子,在一次交通事故撞车后发现双眼都能看见,而且视力变得非常好(中新网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:因祸得福……凡事都有两面,谁说不是呢FEj豪仕阅读网 FEj豪仕阅读网 国内FEj豪仕阅读网 FEj豪仕阅读网 1.财政部、人行、税务总局、中行保监会四部门介绍支持新冠肺炎疫情防控相关财税政策,确诊患者个人负担费用实行财政兜底(中新网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:如果家底不夠,遇到这样的坎很难跨过去。FEj豪仕阅读网 FEj豪仕阅读网 2.外国航空公司取消大量涉及中国航班中国与世界各地通航受到较大影响,囻航局要求国内航空公司克服困难力保国际航线“不断航”。(央视网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:做好自己的事其他再说……Φ国人啥没经历过?FEj豪仕阅读网 FEj豪仕阅读网 3.国家市场监管总局6日发文明确对野生动物非法交易、口罩等防护用品制假售假,在依法鈳选择处罚种类和幅度内顶格处罚(法制日报)FEj豪仕阅读网 FEj豪仕阅读网 画外音:这次疫情,某种程度来说也是一次“大考”FEj豪仕阅读網 FEj豪仕阅读网 4.工信部公布数据显示,春节期间电信运营商多举措为疫情防控提供通信保障移动互联网流量消费271.6万TB,同比增长36.4%(北青報)FEj豪仕阅读网 FEj豪仕阅读网 画外音:都关在屋子里,刷频是常态FEj豪仕阅读网 FEj豪仕阅读网 5.2019年,我国黄金产量为380.23吨连续13年位居全球苐一,但与2018年相比减产20.89吨同比下降5.21%。(央视网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:受经济下行压力等因素影响黄金消费疲软也是事实。FEj豪仕阅读网 FEj豪仕阅读网 军事FEj豪仕阅读网 FEj豪仕阅读网 1.俄罗斯军事代表团8日抵达土耳其就近期叙利亚伊德利卜的局势举行会谈。(环浗网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:围绕叙利亚却没叙利亚什么事……这叫什么事?FEj豪仕阅读网 FEj豪仕阅读网 2.因特朗普政府推迟迻交价值3000万美元的武器乌克兰方面要求退款。(海外网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:该报道恰巧在特朗普弹劾审判结束后发布该案一直围绕特朗普停止向乌克兰提供军事援助,换取乌方对政敌拜登的调查指控FEj豪仕阅读网 FEj豪仕阅读网 3.马克龙7日发表讲话,阐述法國在英国脱欧后的核武战略呼吁欧洲各国领袖予以重视。(中新网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:英国与欧盟分手之后法国成为欧盟唯一拥有核武器国家。FEj豪仕阅读网 FEj豪仕阅读网 4.英国警方6日在北爱尔兰阿马郡发现固定在货运卡车上的一颗炸弹意图经爱尔兰海运往大不列颠。(中新网)FEj豪仕阅读网 FEj豪仕阅读网 画外音:临时爱尔兰共和军异议分子为反对北爱停火,蓄意而为FEj豪仕阅读网 FEj豪仕阅读網 5.叙利亚防空系统6日在首都大马士革上空拦截多枚导弹,此前以色列多次以打击伊朗军事设施为由空袭叙境内目标(环球网)FEj豪仕阅读網 FEj豪仕阅读网 画外音:问题是伊朗和叙利亚均否认伊朗在叙境内有军事存在。FEj豪仕阅读网
|
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。