像Netflix上那样的水平滚动图像
我正在尝试创建一个包含视频内容的网站，我想在主页上横向选择封面图片，就像netflix所做的那样。
这意味着许多图片分布在屏幕尺寸上，并将通过屏幕右侧/左侧的鼠标箭头滚动。
截图：
http://cdn3-i.hitc-s.com/180/netflix_redesign_70590.jpg
有谁知道如何创建它吗？我正在使用Dreamweaver和Muse，掌握了一些基本的html和css技能，使用了一些jquery代码，但我对它还不是很熟悉。
再见，罗伯特
回答 2
Stack Overflow用户
发布于 2015-01-19 05:24:46
如果你没有太多的经验，那么我建议你使用Owl Carousel这样的插件。
它几乎可以做任何你想要的开箱即用的事情。
有很多其他的选择，但这一个确实有触摸支持，而且反应灵敏，所以它相当不错。
这个blog post列出了很多这样的东西(包括猫头鹰的旋转木马)。你可能也会得到很多其他用户的推荐。
你什么时候有时间，我也建议你试着写你自己的旋转木马。有这么多选择，这看起来像是浪费时间，但它确实是一个增强你的html，css和javascript的好方法。
Carousel是我最喜欢的示例项目之一，用于帮助培训工作中的初级开发人员。
Stack Overflow用户
发布于 2018-02-10 15:28:51
从一些基本的样式开始：
这将涵盖Netflix的基本外观和感觉：
body {
background: #141414;
}
#hold_images {
display: inline-block;
white-space: nowrap;
}
#icon_right {
right: 20;
cursor: pointer;
margin-top: -200px;
position: fixed;
}
#icon_left {
left: 20;
cursor: pointer;
margin-top: -200px;
position: fixed;
}
.transition {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
img {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
cursor: pointer;
}在你的身体上添加一个来保存图片：
<body>
<div id='hold_images'></div>
</body>使用jQuery处理图像和图标的追加、图像悬停和平滑滚动：
这些图像是截取的屏幕截图，保存在一个img文件夹中，还有一个库用于添加人字形图标，但你可以使用任何东西。
images = {
"1" : "img/1.png",
"2" : "img/2.png",
"3" : "img/3.png",
"4" : "img/4.png",
"5" : "img/5.png",
"6" : "img/6.png",
"7" : "img/7.png",
"8" : "img/8.png",
"9" : "img/9.png",
"10" : "img/10.png"
}
Object.keys(images).forEach(function(path) {
$('#hold_images').append("<img class='my_img' width=200 height=400 src=" + images[path] + ">");
});
$('body').append("<i id='icon_right'></i>");
$('body').append("<i id='icon_left'></i>");
add_icon('#icon_right', 'fa fa-chevron-right', '40px', 'white');
add_icon('#icon_left', 'fa fa-chevron-left', '40px', 'white');
$(document).ready(function(){
$('.my_img').hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
$(document).on('click', '#icon_right, #icon_left', function() {
if($(this).attr('id') == 'icon_right') {
$('body').animate({scrollLeft: 1000}, 800);
} else {
$('body').animate({scrollLeft: -1000}, 800);
}
});结果：
https://stackoverflow.com/questions/28013179
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号