HTML+CSS+JS实现 ❤️图片轮播幻灯片❤️

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

@font-face {font-weight: normal;font-style: normal;
}.csslider1 {display: inline-block;position: relative;max-width: 833px;width: 100%;margin-top: 10px;
}.csslider1>.cs_anchor {display: none;
}.csslider1>ul {position: relative;z-index: 1;font-size: 0;line-height: 0;margin: 0 auto;padding: 0;overflow: hidden;white-space: nowrap;
}.csslider1>ul>li.img img {width: 100%;
}.csslider1>ul>li.img {font-size: 0pt;-khtml-user-select: none;-moz-user-select: none;user-select: none;
}.csslider1>ul>li {position: relative;display: inline-block;width: 100%;height: 100%;overflow: hidden;font-size: 15px;font-size: initial;line-height: normal;white-space: normal;vertical-align: top;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);
}

HTML代码 :

<!doctype html>
<html><head><meta charset="utf-8"><title>纯CSS3实现的图片切换幻灯片代码</title>
</head><body><center><section id="rt-showcase-surround"><div id="rt-showcase" class="slider-container rt-overlay-dark"><div class="rt-container slider-container"><div class="rt-grid-12 rt-alpha rt-omega"><link rel="stylesheet" href="css/style.css"><!--[if IE]><link rel="stylesheet" href="css/ie.css"><![endif]--><!--[if lte IE 9]><script type="text/javascript" src="js/ie.js"></script><![endif]--><div class="csslider1 autoplay"><input name="cs_anchor1" autocomplete="off" id="cs_slide1_0" type="radio" class="cs_anchor slide"><input name="cs_anchor1" autocomplete="off" id="cs_slide1_1" type="radio" class="cs_anchor slide"><input name="cs_anchor1" autocomplete="off" id="cs_slide1_2" type="radio" class="cs_anchor slide"><input name="cs_anchor1" autocomplete="off" id="cs_play1" type="radio" class="cs_anchor" checked><input name="cs_anchor1" autocomplete="off" id="cs_pause1" type="radio" class="cs_anchor"><ul><div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"><img src="images/1.jpg" style="width: 100%;"></div><li class="num0 img"><img src="images/1.jpg" alt="Clouds" title="Clouds" /></li><li class="num1 img"><img src="images/2.jpg" alt="Typewriter" title="Typewriter" /></li><li class="num2 img"><img src="images/3.jpg" alt="Bicycle" title="Bicycle" /></li></ul><div class="cs_description"><label class="num0"><span class="cs_title"><span class="cs_wrapper">Clouds</span></span></label><label class="num1"><span class="cs_title"><span class="cs_wrapper">Typewriter</span></span></label><label class="num2"><span class="cs_title"><span class="cs_wrapper">Bicycle</span></span></label></div><div class="cs_arrowprev"><label class="num0" for="cs_slide1_0"></label><label class="num1" for="cs_slide1_1"></label><label class="num2" for="cs_slide1_2"></label></div><div class="cs_arrownext"><label class="num0" for="cs_slide1_0"></label><label class="num1" for="cs_slide1_1"></label><label class="num2" for="cs_slide1_2"></label></div><div class="cs_bullets"><label class="num0" for="cs_slide1_0"><span class="cs_point"></span><span class="cs_thumb"><img src="images/small/1.jpg" alt="Clouds" title="Clouds" /></span></label><label class="num1" for="cs_slide1_1"><span class="cs_point"></span><span class="cs_thumb"><img src="images/small/2.jpg" alt="Typewriter" title="Typewriter" /></span></label><label class="num2" for="cs_slide1_2"><span class="cs_point"></span><span class="cs_thumb"><img src="images/small/3.jpg" alt="Bicycle" title="Bicycle" /></span></label></div></div></div><div class="clear"></div></div></div></section><!-- /slider --></center></body></html>

上面的图片需要引入