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;}
1
2
3
4
5
6
7
8
9
10
11
12
13

二、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={
				//清除class
				clearclass: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)
			}
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

三、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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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