HTML5 响应式旋转木马布局

旋转木马式的图片展览，采用了精心设计的响应式设计布局。请调整预览界面的长宽，观察界面元素的变化： 1. 前后导航浏览按钮的位置（从两侧到下方） 2. 图片块的列数（从3个到1个）

carousel,responsive

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2690
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function(w){
    	var sw = document.body.clientWidth,
				current = 0,
				breakpointSize = window.getComputedStyle(document.body,':after').getPropertyValue('content'),
				multiplier = 1, /*Determines the number of panels*/
				$carousel = $('.c'),
				$cList = $('.c-list'),
				$cWidth = $carousel.outerWidth(),
				$li = $('.c li'),
				$liLength = $li.size(),
				numPages = $liLength/multiplier,
				$prev = $('.c-nav .prev'),
				$next = $('.c-nav .next');

$(document).ready(function() {
				buildCarousel();
			});

$(window).resize(function(){ //On Window Resize
				sw = document.body.clientWidth;
				$cWidth = $carousel.width();
				breakpointSize = window.getComputedStyle(document.body,':after').getPropertyValue('content');  /* Conditional CSS http://adactio.com/journal/5429/ */
				sizeCarousel();
				posCarousel();
			});

function sizeCarousel() { //Determine the size and number of panels to reveal
				current = 0;
				if (breakpointSize == 'medium') {
					multiplier = 2;

} else if (breakpointSize == 'large') {
					multiplier = 3;
				} else {
					multiplier = 1;
				}

animLimit = $liLength/multiplier-1;

$li.outerWidth($cWidth/multiplier); //Set panel widths

}

function buildCarousel() { //Build the Carousel
				sizeCarousel();
			}

function posCarousel() { //Animate Carousel. CSS transitions used for the actual animation.
				var pos = -current * $cWidth;
				$cList.css("left",pos);
			}

$prev.click(function(e){ //Previous Button Click
				e.preventDefault();
				if(current>0) {
					current--;
				}
				posCarousel();

});
			$next.click(function(e){ //Next Button Click
				e.preventDefault();
				if(current<animLimit) {
					current++;
				}
				posCarousel();
			});
		})(this);

window.open    = function(){};
    window.print   = function(){};
    // Support hover state for mobile.
    if (false) {
      window.ontouchstart = function(){};
    }

编译

CSS

.c {
  position: relative;
  max-width: 74em;
  margin: 0 auto; }

.c-list-container {
  overflow: hidden;
  position: relative; }

.c-list {
  width: 99999em;
  position: relative;
  left: 0;
  -webkit-transition: left 0.5s ease-out;
  -moz-transition: left 0.5s ease-out;
  -o-transition: left 0.5s ease-out;
  transition: left 0.5s ease-out; }

.c li {
  float: left; }

.c li a {
  display: block; }

.c img {
  display: block; }

.c h2 {
  margin-top: 0; }

.summary {
  padding: 1em; }

.c-nav {
  clear: both;
  overflow: hidden;
  border-top: 1px solid #808080; }

.c-nav a {
  float: left;
  width: 50%;
  padding: 1em;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out; }

.c-nav a.next {
  border-left: 1px solid #808080;
  text-align: right; }

.c-nav a.inactive {
  opacity: 0.2;
  /* Medium */ }

@media screen and (min-width: 35em) {
  /* Large */
    .c {
      padding: 1em 0.5em 0; }
    .c li {
      padding: 0 0.5em; }
    body:after {
      content: 'medium';
      display: none; } }

@media screen and (min-width: 56.25em) {
  /*Large with room to spare on either side */
    body:after {
      content: 'large';
      display: none; } }

@media screen and (min-width: 82em) {
  .c-nav a {
    position: absolute;
    top: 40%;
    left: -4em;
    width: 4em;
    height: 2em;
    padding: 0;
    margin-top: -1em; }

.c-nav a.next {
    left: auto;
    right: -4em;
    border: 0; } }

HTML

</div>

旋转木马式的图片展览，采用了精心设计的响应式设计布局。请调整预览界面的长宽，观察界面元素的变化： 1. 前后导航浏览按钮的位置（从两侧到下方） 2. 图片块的列数（从3个到1个）

carousel,responsive

编辑器支持Emmet

快捷键

旋转木马式的图片展览，采用了精心设计的响应式设计布局。请调整预览界面的长宽，观察界面元素的变化： 1. 前后导航浏览按钮的位置（从两侧到下方） 2. 图片块的列数（从3个到1个）

carousel,responsive

使用css flexbox（弹性框）实现的响应式布局网站模板

CSS3 动态高度梯田样式的响应式标签集

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：