JavaScript实现轮播图案例 JavaScript实现轮播图案例

本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下
运用定时器所写成的一个简单的轮播图，直接看代码，如下：
1.css代码

*{margin: 0; padding: 0; box-sizing: border-box; }body{font-size: 14px; font-family: Arial, Helvetica, sans-serif; }.slider-box{width: 1226px; height: 460px; margin: 10px auto; overflow: hidden; position: relative; }.slider-box .images a{width: 100%; height: 460px; position: absolute; left: 0; top: 0; opacity: 0; transition: all 2s; } .slider-box .images a.active{opacity: 1; } .slider-box .images a img{width: 100%; height: 100%; display: block; }.slider-box .nav{position: absolute; left: 0; top: 195px; width: 100%; /* background-color: red; */padding: 0 10px; /* height: 100px; */}.slider-box .nav a{background-image: url(img/icons.png); width: 41px; height: 69px; display: inline-block; background-repeat: no-repeat; }.slider-box .nav .prev{background-position: -84px 0; }.slider-box .nav .prev:hover{background-position: 0 0; }.slider-box .nav .next{background-position: -125px 0; float: right; }.slider-box .nav .next:hover{background-position: -42px 0; }.slider-box .pages{position: absolute; right: 20px; bottom: 25px; font-size: 0; width: 1186px; text-align: center; /* background-color: rebeccapurple; */}.slider-box .pages .dot{display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(0,0,0,0.4); margin-right: 10px; }.slider-box .pages .dot:hover{background-color: yellow; }.slider-box .pages .dot.active{background-color: yellow; }

【JavaScript实现轮播图案例】2.html代码