Template:Tongji-Software/test/css/jflex.css

.jFlex { overflow: hidden; position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.slides { list-style: none; margin: 0; padding: 0; position: relative; }

.slides--anim { -moz-transition: transform ease-out .3s; -ms-transition: transform ease-out .3s; -o-transition: transform ease-out .3s; -webkit-transition: transform ease-out .3s; transition: transform ease-out .3s; }

.slides--titles { margin: 0; padding: 0; }

.slides:before, .slides--titles:before, .slides:after, .slides--titles:after { content: ' '; display: table; }

.slides:after, .slides--titles:after { clear: both; }

.slides li { display: block; float: left; overflow: hidden; position: relative; }

.slides img { display: block; height: auto; max-width: 100%; }

.slides--titles li { background: #eee; cursor: pointer; float: left; overflow: hidden; position: relative; text-align: center; -moz-transition: background linear .3s; -ms-transition: background linear .3s; -o-transition: background linear .3s; -webkit-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--manual .title--l { -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; -webkit-transition: all linear .3s; transition: all linear .3s; }

.slides--titles li.title--auto .title--l { -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; -webkit-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; -webkit-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: bold; }

.slides--titles li.title--active { background: #ddd; }