Question

我正在尝试创建一个包含视频内容的网站，我希望在主页上有一个横向选择的封面图片，就像netflix一样。

这意味着大量图片会分散在屏幕尺寸上，并会通过屏幕右侧/左侧的鼠标悬停箭头进行滚动。

截图：

http://cdn3-i.hitc-s.com/180/netflix_redesign_70590.jpg

有谁知道如何创建它？我正在使用Dreamweaver和Muse，获得了一些基本的html和css技巧，使用了一些jquery代码，但我对它还不是很坚定。

再见，罗伯特

Answer 1

从一些基本的CSS样式开始：

这将涵盖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; 
}

在您的身体上添加一个div来保存图片：

<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);
    }
});

<强>结果：

编辑2019

对于那些寻找图标代码的人来说，这来自 Azle 库。您可以按如下方式向目标元素添加图标：

az.add_icon('target_class', target_instance, {
    "this_class": "scroll_icons",
    "icon_class": "fa-chevron-left"
})
az.add_icon('target_class', target_instance, {
    "this_class": "scroll_icons",
    "icon_class": "fa-chevron-right"
})

target_class 是包含图标的元素的类名， target_instance 是该类的实例编号。您可以通过在浏览器控制台（inspect元素）中运行az.show_icons（）来查看所有可用图标。

您可以使用Azle编写整个应用程序代码，而不是编写原始JS / jQuery / CSS / HTML。如果您有兴趣，请参阅 Azle 中的 Netlix克隆应用示例。此HTML文件包含生成克隆站点所需的所有代码：

<!DOCTYPE html>
<html>

<head>
<script src='http://azlejs.com/v2/azle.min.js'></script>
</head>

<body>
</body>
</html>

<script>  

create_azle(function() {
    az.style_body({
        "background": "#141414",
        "font-family": "Arial"
    })
    az.add_sections({
        "this_class": "my_sections",
        "sections": 4
    })
    az.all_style_sections('my_sections', {
        "flush": "true",
        "background": "#141414",
        "height": "auto"
    })
    az.style_sections('my_sections', 1, {
        "height": "50px",
        "background": "#141414"
    })
    az.add_layout('my_sections', 1, {
        "this_class": "top_pane_layout",
        "row_class": "top_pane_layout_rows",
        "cell_class": "top_pane_layout_cells",
        "number_of_rows": 1,
        "number_of_columns": 3
    })
    az.style_layout('top_pane_layout', 1, {
        "height": "50px",
        "column_widths": ['10%', '50%', '40%'],
        "margin-top": "-10px",
        "border": 0
    })
    az.add_image('top_pane_layout_cells', 1, {
        "this_class": "netflix_logo",
        "image_path": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/2000px-Netflix_2015_logo.svg.png"
    })
    az.style_image('netflix_logo', 1, {
        "width": "100px",
        "padding": "20px"
    })
    hold_titles = ['Home', 'TV Shows', 'Movies', 'Recently Added', 'My List']
    az.call_multiple({
        "iterations": hold_titles.length,
        "function": `
            az.add_text('top_pane_layout_cells', 2, {
                "this_class" : "titles", 
                "text" : hold_titles[index]
            })
            az.all_style_text('titles', {
                "color" : "white",
                "display" : "inline-block",
                "margin-right" : "4px",
                "margin-bottom" : "1px",
                "cursor" : "pointer"
            })
            az.style_text('titles', 1, {
                "font-weight" : "bold"
            })
        `
    })
    az.style_layout('top_pane_layout_cells', 3, {
        "align": "right"
    })
    az.add_layout('top_pane_layout_cells', 3, {
        "this_class": "icons_layout",
        "row_class": "icons_layout_rows",
        "cell_class": "icons_layout_cells",
        "number_of_rows": 1,
        "number_of_columns": 4
    })
    az.style_layout('icons_layout', 1, {
        "height": "auto",
        "width": "auto",
        "margin-top": "15px",
        "border": 0
    })
    az.add_icon('icons_layout_cells', 1, {
        "this_class": "op_icons",
        "icon_class": "fa-search"
    })
    az.add_text('icons_layout_cells', 2, {
        "this_class": "kids",
        "text": "KIDS"
    })
    az.style_text('kids', 1, {
        "color": "white",
        "margin-right": "25px"
    })
    az.add_icon('icons_layout_cells', 3, {
        "this_class": "op_icons",
        "icon_class": "fa-bell"
    })
    az.add_icon('icons_layout_cells', 4, {
        "this_class": "op_icons",
        "icon_class": "fa-smile-o"
    })
    az.all_style_icon('op_icons', {
        "color": "white",
        "font-size": "20px",
        "margin-right": "25px",
        "cursor" : "pointer"
    })
    az.add_html('my_sections', 2, {
        "html": "<iframe class='youtube' width='100%' height='500px' src='https://www.youtube.com/embed/y3GLhAumiec?autoplay=1&mute=1&enablejsapi=1' frameborder='0'></iframe>"
    })
    az.style_html('youtube', 1, {
        "margin-top": "-30px"
    })
    az.add_layout('my_sections', 3, {
        "this_class": "poster_layout",
        "row_class": "poster_layout_rows",
        "cell_class": "poster_layout_cells",
        "number_of_rows": 1,
        "number_of_columns": 3
    })
    az.style_layout('poster_layout', 1, {
        "column_widths": ['1%', '99%', '1%'],
        "height": "200px",
        "width": "95%",
        "align": "center",
        "border": 0
    })
    az.add_icon('poster_layout_cells', 1, {
        "this_class": "scroll_icons",
        "icon_class": "fa-chevron-left"
    })
    az.add_icon('poster_layout_cells', 3, {
        "this_class": "scroll_icons",
        "icon_class": "fa-chevron-right"
    })
    az.style_icon('scroll_icons', 1, {
        "color": "white",
        "font-size": "30px",
        "cursor": "pointer",
        "float": "left"
    })
    az.style_icon('scroll_icons', 2, {
        "color": "white",
        "font-size": "30px",
        "cursor": "pointer",
        "float": "right"
    })
    az.add_scrollable_container('poster_layout_cells', 2, {
        "this_class": "scroll_posters",
        "direction": "horizontal"
    })
    az.add_event('scroll_icons', 1, {
        "type": "click",
        "function": `
            az.scroll_container('scroll_posters', 1, {
                "direction" : "left"
            })        
        `
    })
    az.add_event('scroll_icons', 2, {
        "type": "click",
        "function": `
            az.scroll_container('scroll_posters', 1, {
                "direction" : "right"
            })        
        `
    })
    images = ["https://ninertimes.com/wp-content/uploads/2018/02/AC_Vertical-Kovacs_Stacks_SF_CYMK-1.jpg", "https://ih0.redbubble.net/image.514070091.0037/flat,550x550,075,f.u1.jpg", "https://m.media-amazon.com/images/M/MV5BZWVmYjJlZjgtMzU4YS00MDQxLWJmYjQtNTcyMjJkMDNmOTZkXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg", "https://m.media-amazon.com/images/M/MV5BMTU0MjQxNjk3Ml5BMl5BanBnXkFtZTgwOTM3NzY0NDM@._V1_UY1200_CR90,0,630,1200_AL_.jpg", "https://occ-0-114-116.1.nflxso.net/art/a5dd9/9c52249f2f8b67b8675e4e04e4b2f4ed0b1a5dd9.jpg", "https://i.pinimg.com/originals/05/69/2e/05692ee220479771424cb42f8c07fc75.jpg", "https://i.pinimg.com/736x/d5/15/68/d51568eddb6dddd5e1e43febaafa7f15.jpg", "https://m.media-amazon.com/images/M/MV5BMzhhMTczMDQtNWE0Yy00OTJiLTlmYjgtNWU1MmVkYTVlYWVhXkEyXkFqcGdeQXVyNjEwNTM2Mzc@._V1_.jpg", "https://radradio.com/wp-content/uploads/DTbv7yDX0AI1GJl.jpg", "https://m.media-amazon.com/images/M/MV5BMjQ3OWNlNDAtODZlOS00Y2NhLThiNTEtMWI4MWFkMTZjMGUzXkEyXkFqcGdeQXVyODQ1NTk5OQ@@._V1_UX182_CR0,0,182,268_AL_.jpg"]
    az.call_multiple({
        "iterations": images.length,
        "function": `
            index_ = index
            img_path = images[index_]
            az.add_button('scroll_posters', 1, {
                "this_class" : "movie_posters",
                "text" : ""
            })
            az.style_button('movie_posters', index_+1, {
                "width" : "200px",
                "height" : "300px",
                "margin-right" : "10px",
                "background" : "url(" + img_path + ") no-repeat",
                "background-size" : "200px 300px"
            })
            az.all_add_event('movie_posters', {
                "type" : "hover",
                "function" : "az.style_button('movie_posters', az.get_target_instance(this.id), {'transform' : 'scale(1.2)', '-webkit-transition' : 'all .4s ease-in-out'})"
            })
            az.all_add_event('movie_posters', {
                "type" : "unhover",
                "function" : "az.style_button('movie_posters', az.get_target_instance(this.id), {'transform' : 'scale(1)', '-webkit-transition' : 'all .2s ease-in-out'})"
            })
        `
    })
    // repeat slider to mimic genres



    az.call_multiple({
        "iterations": 10,
        "function": `
            index_ = index
            az.clone_layout('my_sections', 4, {
                "copy_class" : "poster_layout",
                "copy_instance" : 1,
                "this_class" : "poster_layout_clone",
                "row_class" : "poster_layout_clone_rows",
                "cell_class" : "poster_layout_clone_cells"
            })

            az.all_style_layout('poster_layout_clone', {
                "align" : "center"
            })
            az.all_add_event('movie_posters', {
                "type" : "hover",
                "function" : "az.style_button('movie_posters', az.get_target_instance(this.id), {'transform' : 'scale(1.2)', '-webkit-transition' : 'all .4s ease-in-out'})"
            })
            az.all_add_event('movie_posters', {
                "type" : "unhover",
                "function" : "az.style_button('movie_posters', az.get_target_instance(this.id), {'transform' : 'scale(1)', '-webkit-transition' : 'all .2s ease-in-out'})"
            })

            `
    })

    az.call_once_satisfied({
        "condition" : "az.check_exists('scroll_posters', 11)",
        "function" : "add_icon_events()"
    })

})

function add_icon_events() {
    az.call_every({
        "every" : 100, 
        "function" : `
            index_ = index
            az.add_event('scroll_icons', (index_*2) + 3, {
                "type": "click",
                "function": "az.scroll_container('scroll_posters', " + (index_ + 2) + ", {'direction' : 'left'})"        
            })
            az.add_event('scroll_icons', (index_*2) + 4, {
                "type": "click",
                "function": "az.scroll_container('scroll_posters', " + (index_ + 2) + ", {'direction' : 'right'})"
            })
        `
    })
    az.delay_event({
        "delay" : 2000,
        "function" : "az.stop_call_every()"
    })
}

</script>

<强>结果：

您可以查看克隆here。

Answer 2

如果您没有太多经验，我建议您使用Owl Carousel等插件。

它可以完成您想要开箱即用的所有内容。

还有很多其他选择，但是这个选项确实有触摸支持，并且响应也很好。所以它非常好。

这个blog post列出了很多（包括猫头鹰旋转木马）。其他用户也可能会推荐很多其他用户。

你什么时候有时间我还建议你自己写一个旋转木马。有很多选项可能看起来浪费时间，但它确实是增强你的html，css和javascript的好方法。

旋转木马是我最喜欢的示范项目，旨在帮助培训初级开发人员。

水平滚动图像在Netflix上

2 个答案: