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-items>li{position: absolute;opacity: 0;transition: all .5s;width: 100%;}.myth-items>li 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 items=this.dom[0].children[0].children;var circles=this.dom[0].children[3].children;var rightBtn = this.dom[0].children[2];var leftBtn = this.dom[0].children[1];var index=0;var carouseltimer=null;var carouselAction={//清除classclearclass:function(){for(let i=0;i<items.length;i++){items[i].className="";circles[i].className="myth-circleNormal";circles[i].setAttribute("num",i);}},/*只显示一个class*/move : function(){this.clearclass();items[index].className="active";circles[index].className="myth-circleRed";}}//点击右边按钮切换下一张图片rightBtn.onclick=function(){index++;if(index>items.length-1){index=0;}carouselAction.move();}//点击左边按钮切换上一张图片leftBtn.onclick=function(){index--;if(index<0){index=items.length-1}carouselAction.move();}//开始定时器，点击右边按钮，实现轮播carouseltimer=setInterval(function(){rightBtn.onclick();},1500)//点击圆点时，跳转到对应图片for(var i=0;i<circles.length;i++){circles[i].addEventListener("click",function(){var point_index=this.getAttribute("num");index=point_index;carouselAction.move();})}//鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动this.dom[0].onmouseover=function(){clearInterval(carouseltimer);}//鼠标移出又开启定时器this.dom[0].onmouseleave=function(){carouseltimer=setInterval(function(){rightBtn.onclick();},1500)}},

三、HTML代码

<div class="mythBox mid"><div class="myth-carousel" style="height: 400px;"><ul class="myth-items"><li class="active"><img src="img/1.png"></li><li><a href="#"><img src="img/2.png"></a></li><li><a href="#"><img src="img/3.png"></a></li><li><a href="#"><img src="img/4.png"></a></li><li><a href="#"><img src="img/5.png"></a></li></ul><div class="myth-carousel-btnleft"><</div><div class="myth-carousel-btnright">></div><ul class="myth-circle"><li class="myth-circleRed"></li><li class="myth-circleNormal"></li><li class="myth-circleNormal"></li><li class="myth-circleNormal"></li><li class="myth-circleNormal"></li></ul></div></div><script>myth(".myth-carousel").carousel();</script>

ok，老思路、老方法，新代码，下载完整代码请单击。