现在大家都离不开手机上网，网页别忘了做个视窗大小的设计喔，看着才舒坦。想要在小屏幕上看多点图？快来试下“图片轮播”这个好办法！说不定你会问，学习CSS代码难不难呀？担心啥看了这篇文章后保证教会你如何用CSS实现图片自动播送，样例和解释统统齐全
创建HTML结构
咱们先得用HTML弄个能挂好多图的地方呗，名字得响亮又帅气点，就叫”.carousel-container”，然后把要展示的图片丢进去，用”.carousel-items”标签搞定它们。最后别忘了放两个控制方向的按钮，”.carousel-prev”和”.carousel-next”，这样调整CSS和JS就方便多了！
CSS样式设置
咱们这段时间要做什么？就是给CSS加点料，弄点好看又好用的样式装饰下容器、小角落那些地方，包括那几个可爱又呆萌的拉拽箭头。想让转盘不管屏幕大小都可以完美显示？直接用flex排个队就搞定了！然后根据媒体查询调整不同尺寸时的宽度。怎么做？首先，把你的容器位置固定住，然后加入那个神奇的属性 overflow:hidden，多余的部分就神奇地不见！还有，别忘了子容器也得用到flex布局这等神器
媒体查询设置
.carousel-container {
position: relative;
overflow: hidden;
width: 100%;
height: auto;
}
.carousel-items {
display: flex;
flex-wrap: nowrap;
width: 500%; /* 将子容器宽度扩大5倍 */
}
.carousel-items img {
width: 20%;
margin-right: 1rem;
flex: 1;
}
.carousel-prev,
.carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.carousel-prev {
left: 0;
}
.carousel-next {
right: 0;
}
手机屏可不都一样，用到媒体查询就能设置元素属性，还能随着屏幕大小自动调整。比如在小屏手机里，图片宽度设置为50%就好；实在太小的话，也可以调到100%，别忘记看下高度是否合适喔！
使用CSS3动画
别慌CSS3来帮你画动态图！搞定，每隔10秒自动切换。只要加上个carousel-animation，动起来刚刚的别忘了添加这两个属性：linear让动画走直路，infinite让画面循环不断~
JavaScript实现交互
最后，咱们稍微改进下Javascript，让你在翻页时也能看到漂亮的滑图效果。懂了吗？就是用querySelector找出你要的东东，然后给所有点击链接编个队呗。然后，咱们再搭个叫做”carouselScroll”的函数来搞这个滑动特效。想让图片自动换位，最关键的就是看清楚子容器的实际宽和可视宽，再来调图片位置就行了。
/* 根据不同屏幕尺寸改变样式 */
@media (max-width: 768px) {
.carousel-items img {
width: 50%;
}
.carousel-container {
height: 250px;
}
}
@media (max-width: 480px) {
.carousel-items img {
width: 100%;
margin-right: 0;
}
.carousel-container {
height: 180px;
}
}
看了这些步骤和例子，你已经知道怎么让网页上的图自己动起来！当然，里面还有几个新的技术点，比如媒体查询、CSS3动画和JavaScript互动等等，它们会让你的网站变得更流畅、更漂亮无论大家是用电脑还是手机上看都没问题。
现在这种时代，谁手机不在手上？做网站的那帮子设计师要想网站在各种屏幕上展示都好看，那就得学会响应式设计。这样，不论你用啥大小的设备看网页，都会美美的。再说小技巧，响应式图片轮播这个功能超好用，用来展示商品、发布活动和传递信息简直方便到家。
@keyframes carousel-animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.carousel-items {
/* 动画设置 */
animation: carousel-animation 10s infinite linear;
}
.carousel-items:hover {
/* 鼠标悬停时终止动画 */
animation-play-state: paused;
}
经常上网打游戏，这种”响应式”设计怎么样呀?有没有哪个设计让你觉得特别炫酷的？想听你聊聊看对这”响应式”设计怎么评价。
评论0