支持电脑手机端的幻灯片轮播代码
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<div class="flex"> <ul class="slides"> <li data-title="Slide 1"> <img alt="" src="img/beasts_feature.jpg"> </li> <li data-title="Slide 2"> <img alt="" src="img/element-taiwan-thmb.jpg"> </li> <li data-title="Slide 3"> <img alt="" src="img/streets-newyork.jpg"> </li> </ul></div>
4、书写css代码。.slides,.slides--titles{margin:0;padding:0}.slides li,.slides--titles li{overflow:hidden;position:relative;float:left}.jFlex,.slides,.slides li,.slides--titles li{position:relative}.jFlex{overflow:hidden;-we bkit-touch-callout:none;-we bkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.slides{list-style:none}.slides--anim{-moz-transition:transform ease-out .3s;-ms-transition:transform ease-out .3s;-o-transition:transform ease-out .3s;-we bkit-transition:transform ease-out .3s;transition:transform ease-out .3s}.slides--titles:after,.slides--titles:before,.slides:after,.slides:before{content:' ';display:table}.slides--titles:after,.slides:after{clear:both}.slides li{display:block}.slides img{display:block;height:auto;max-width:100%}.slides--titles li{background:#eee;cursor:pointer;text-align:center;-moz-transition:background linear .3s;-ms-transition:background linear .3s;-o-transition:background linear .3s;-we bkit-transition:background linear .3s;transition:background linear .3s;width:33.33333%}.jflex--2 li{width:50%}.jflex--3 li{width:33.3333333%}.jflex--4 li{width:25%}.jflex--5 li{width:20%}.jflex--6 li{width:16.6666667%}.slides--titles li .title--l{background:#555;display:block;height:4px;left:-100%;position:relative}.slides--titles li .title--t{color:#333;display:block;height:50px;line-height:50px;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slides--titles li.title--auto .title--l,.slides--titles li.title--manual .title--l{-moz-transition:all linear .3s;-ms-transition:all linear .3s;-o-transition:all linear .3s;-we bkit-transition:all linear .3s;transition:all linear .3s}.slides--titles li.title--auto.title--active .title--l{-moz-transition:all linear 5s;-ms-transition:all linear 5s;-o-transition:all linear 5s;-we bkit-transition:all linear 5s;transition:all linear 5s}.slides--titles li.title--active .title--l{left:0}.slides--titles li.title--right .title--l{left:100%}.slides--titles li.title--active .title--t{font-weight:700}.slides--titles li.title--active{background:#ddd} body { font-family: 'Roboto'; padding: 10px; } .flex { margin: 0 auto 20px; max-width: 768px; }
5、书写并添加js代码。<script src="js/jquery-2.1.1.min.js" ></script><script src="js/jflex.min.js"></script>
6、代码整体结构。
7、查看效果。
