网站门户,浙江省住房和城乡建设厅成绩查询,网页设计电子版教材,百度托管公司这一节#xff0c;我自学了焦点图效果(自动播放#xff0c;圆点控制)#xff0c;首先看一下效果#xff1a; 下面我们还是老思路#xff0c;css展示学习三个主要步骤#xff1a;一是CSS代码#xff0c;二是Javascript代码#xff0c;三是Html代码。
一、css代码主要如…这一节我自学了焦点图效果(自动播放圆点控制)首先看一下效果 下面我们还是老思路css展示学习三个主要步骤一是CSS代码二是Javascript代码三是Html代码。
一、css代码主要如下
/* 幻灯片 */.myth-carousel{width: 100%;position: relative;overflow: hidden;}.myth-items{width: 100%;height: 100%;padding: 0;margin: 0;display: block;}.myth-itemsli{position: absolute;opacity: 0;transition: all .5s;width: 100%;}.myth-itemsli img{width: 100%;}.myth-items .active{opacity:1;}.myth-carousel-btnleft{width: 30px;height: 69px;font-size: 30px;color: white;background-color:rgba(0,0,0,0.4);line-height: 69px;padding-left:5px;z-index: 10;position: absolute;left: 0;top: 50%;transform: translateY(-60%);cursor: pointer;opacity: 0;}.myth-carousel:hover .myth-carousel-btnleft{opacity: 1;} .myth-carousel-btnright{width: 26px;height: 69px;font-size: 30px;color: white;background-color:rgba(0,0,0,0.4);line-height: 69px; padding-left: 5px;z-index: 10;position: absolute;right: 0;top: 50%;cursor: pointer;opacity: 0;transform: translateY(-60%);}.myth-carousel:hover .myth-carousel-btnright{opacity: 1;}.myth-circle{height: 20px;position: absolute;bottom: 35px;right: 25px;display: flex;}.myth-circleNormal{width: 10px;height: 10px;border-radius: 10px;border: 2px solid white;background: rgba(0,0,0,0.4);cursor: pointer;margin: 5px;}.myth-circleRed{width: 10px;height: 10px;border-radius: 10px;border: 2px solid white;background:#ff0000;cursor: pointer;margin: 5px;}二、Javascript代码
carousel:function(){ var itemsthis.dom[0].children[0].children;var circlesthis.dom[0].children[3].children;var rightBtn this.dom[0].children[2];var leftBtn this.dom[0].children[1];var index0;var carouseltimernull;var carouselAction{//清除classclearclass:function(){for(let i0;iitems.length;i){items[i].className;circles[i].classNamemyth-circleNormal;circles[i].setAttribute(num,i);}},/*只显示一个class*/move : function(){this.clearclass();items[index].classNameactive;circles[index].classNamemyth-circleRed;}}//点击右边按钮切换下一张图片rightBtn.onclickfunction(){index;if(indexitems.length-1){index0;}carouselAction.move();}//点击左边按钮切换上一张图片leftBtn.onclickfunction(){index--;if(index0){indexitems.length-1}carouselAction.move();}//开始定时器点击右边按钮实现轮播carouseltimersetInterval(function(){rightBtn.onclick();},1500)//点击圆点时跳转到对应图片for(var i0;icircles.length;i){circles[i].addEventListener(click,function(){var point_indexthis.getAttribute(num);indexpoint_index;carouselAction.move();})}//鼠标移入清除定时器并开启一个三秒的定时器使慢慢转动this.dom[0].onmouseoverfunction(){clearInterval(carouseltimer);}//鼠标移出又开启定时器this.dom[0].onmouseleavefunction(){carouseltimersetInterval(function(){rightBtn.onclick();},1500)}},三、HTML代码
div classmythBox middiv classmyth-carousel styleheight: 400px;ul classmyth-itemsli classactiveimg srcimg/1.png/lilia href#img srcimg/2.png/a/lilia href#img srcimg/3.png/a/lilia href#img srcimg/4.png/a/lilia href#img srcimg/5.png/a/li/uldiv classmyth-carousel-btnleft/divdiv classmyth-carousel-btnright/divul classmyth-circleli classmyth-circleRed/lili classmyth-circleNormal/lili classmyth-circleNormal/lili classmyth-circleNormal/lili classmyth-circleNormal/li/ul/div/divscriptmyth(.myth-carousel).carousel();/scriptok老思路、老方法新代码下载完整代码请单击。
