旋转木马在移动屏幕上看起来很不错，但这会让她看起来有尊严和中等大小的屏幕。怎么可能使这个旋转木马适应？我非常感谢你的帮助。
!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
div[data-role="carousel"] {
position: relative;
width: 300px;
margin: 0 auto;
padding: 0;
border: 1px solid #beb;
overflow: hidden;
}
div[data-role="carousel"] .fa-arrow-left,
div[data-role="carousel"] .fa-arrow-right {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 15px;
box-shadow: 0 0 6px #aaa;
height: 30px;
left: 5px;
line-height: 30px;
position: absolute;
text-align: center;
top: 60px;
width: 30px;
cursor: pointer;
z-index: 100;
}
div[data-role="carousel"] .fa-arrow-right {
left: auto;
right: 5px;
}
div[data-role="carousel"] ul {
list-style: outside none none;
margin: 0 0 0 35px;
padding: 0;
text-align: justify;
overflow: hidden;
/* scepll animation */
-webkit-transition: margin-left 1s ease-in-out 0s;
-moz-transition: margin-left 1s ease-in-out 0s;
-ms-transition: margin-left 1s ease-in-out 0s;
-o-transition: margin-left 1s ease-in-out 0s;
transition: margin-left 1s ease-in-out 0s;
}
div[data-role="carousel"] ul li {
float: left;
margin: 0 15px;
width: 200px;
}
</style>
<script type="text/javascript">
window.addEventListener('load', function () {
Array.prototype.slice.call(document.querySelectorAll('div[data-role="carousel"]')).forEach(function(carousel) {
var list = carousel.querySelector('ul')
var pages = list.querySelectorAll('li').length;
var current = 0;
var toLeft = carousel.querySelector('.fa-arrow-left');
var toRight = carousel.querySelector('.fa-arrow-right');
list.style.width = (pages * 230) + 'px'; // li.width + li.margin-(left+right)
// 230 + 35, 35 = (300[carousel.width] - 230[li.width]) / 2[both side]
var offset = 230;// start offset = 35, see CSS div[data-role="carousel"] ul
toLeft.addEventListener('touchend', moveLeft);
toLeft.addEventListener('click', moveLeft);
toRight.addEventListener('touchend', moveRight);
toRight.addEventListener('click', moveRight);
function moveLeft() {
if (current <= 0) {
current = 0;
return;
}
current--;
list.style.marginLeft = (35 - offset * current) + 'px';
}
function moveRight() {
if (current >= pages - 1) {
current = pages;
return;
}
current++;
list.style.marginLeft = (35 - offset * current) + 'px';
}
});
});
</script>
</head>
<body>
<div data-role="carousel">
<i class="fa fa-arrow-left"></i>
<i class="fa fa-arrow-right"></i>
<div class="gutter"></div>
<div class="gutter gutter-right"></div>
<ul>
<li>(1)
<p>
Phasellus porttitor ex nibh, bibendum dictum augue sollicitudin a.
Curabitur vel lectus mi. Sed sit amet urna lectus. Morbi nibh nunc,
gravida a ultrices in, tincidunt cursus ipsum. Phasellus nec justo ipsum.
Sed cursus justo et ullamcorper porttitor. Fusce fermentum sapien purus.
</p>
</li>
<li>(2)
<p>
Donec bibendum egestas elit, ut sollicitudin lacus bibendum vitae.
Etiam hendrerit nisl sed pulvinar laoreet. Curabitur id mi arcu.
Quisque accumsan placerat orci sit amet luctus. Nam odio risus,
tempus quis metus ac, pretium varius tortor. Duis ornare ante tellus,
fermentum gravida metus congue quis. Donec tempor, diam a consectetur
sollicitudin, velit libero maximus nibh, et congue elit tortor eget ex.
Integer eget arcu in sem mollis volutpat. Nunc congue convallis sem, a
luctus nulla suscipit accumsan. Integer porta, metus eget pretium semper,
felis magna maximus purus, ac sollicitudin lorem dolor a justo.
</p>
<p>
Curabitur ut dictum ipsum. Curabitur tincidunt viverra lectus ac elementum.
Praesent at mauris dignissim, accumsan ex ac, tincidunt lorem.
Nam malesuada erat orci, non semper quam tincidunt fermentum.
Aliquam et rhoncus massa. Integer condimentum ultrices augue sed
vulputate. Mauris iaculis nibh a nibh lobortis ultricies tristique
nec massa. Integer fermentum velit nisl, sit amet pretium tortor
dictum non. Aenean tincidunt efficitur enim. Nullam suscipit sapien
eros, non condimentum diam accumsan id. Suspendisse blandit ligula
dolor, eu luctus risus placerat vel.
</p>
</li>
<li>(3)
<p>
Phasellus porttitor ex nibh, bibendum dictum augue sollicitudin a.
Curabitur vel lectus mi. Sed sit amet urna lectus. Morbi nibh nunc,
gravida a ultrices in, tincidunt cursus ipsum. Phasellus nec justo ipsum.
Sed cursus justo et ullamcorper porttitor. Fusce fermentum sapien purus.
</p>
</li>
<li>(4)
<p>
Donec bibendum egestas elit, ut sollicitudin lacus bibendum vitae.
Etiam hendrerit nisl sed pulvinar laoreet. Curabitur id mi arcu.
Quisque accumsan placerat orci sit amet luctus. Nam odio risus,
tempus quis metus ac, pretium varius tortor. Duis ornare ante tellus,
fermentum gravida metus congue quis. Donec tempor, diam a consectetur
sollicitudin, velit libero maximus nibh, et congue elit tortor eget ex.
Integer eget arcu in sem mollis volutpat. Nunc congue convallis sem, a
luctus nulla suscipit accumsan. Integer porta, metus eget pretium semper,
felis magna maximus purus, ac sollicitudin lorem dolor a justo.
</p>
<p>
Curabitur ut dictum ipsum. Curabitur tincidunt viverra lectus ac elementum.
Praesent at mauris dignissim, accumsan ex ac, tincidunt lorem.
Nam malesuada erat orci, non semper quam tincidunt fermentum.
Aliquam et rhoncus massa. Integer condimentum ultrices augue sed
vulputate. Mauris iaculis nibh a nibh lobortis ultricies tristique
nec massa. Integer fermentum velit nisl, sit amet pretium tortor
dictum non. Aenean tincidunt efficitur enim. Nullam suscipit sapien
eros, non condimentum diam accumsan id. Suspendisse blandit ligula
dolor, eu luctus risus placerat vel.
</p>
</li>
<li>(5)
<p>
Donec bibendum egestas elit, ut sollicitudin lacus bibendum vitae.
Etiam hendrerit nisl sed pulvinar laoreet. Curabitur id mi arcu.
Quisque accumsan placerat orci sit amet luctus. Nam odio risus,
tempus quis metus ac, pretium varius tortor. Duis ornare ante tellus,
fermentum gravida metus congue quis. Donec tempor, diam a consectetur
sollicitudin, velit libero maximus nibh, et congue elit tortor eget ex.
Integer eget arcu in sem mollis volutpat. Nunc congue convallis sem, a
luctus nulla suscipit accumsan. Integer porta, metus eget pretium semper,
felis magna maximus purus, ac sollicitudin lorem dolor a justo.
</p>
<p>
Curabitur ut dictum ipsum. Curabitur tincidunt viverra lectus ac elementum.
Praesent at mauris dignissim, accumsan ex ac, tincidunt lorem.
Nam malesuada erat orci, non semper quam tincidunt fermentum.
Aliquam et rhoncus massa. Integer condimentum ultrices augue sed
vulputate. Mauris iaculis nibh a nibh lobortis ultricies tristique
nec massa. Integer fermentum velit nisl, sit amet pretium tortor
dictum non. Aenean tincidunt efficitur enim. Nullam suscipit sapien
eros, non condimentum diam accumsan id. Suspendisse blandit ligula
dolor, eu luctus risus placerat vel.
</p>
</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：0)
你好改变你的CSS。
div[data-role="carousel"] {
max-width: 100%; }
您的轮播现在将是视口的100％。您可以使用媒体查询进一步控制此操作。这是一个JS小提琴http://jsfiddle.net/gward90/k9vztr0v/