问题
i'm trying to create a website with video content and i want to have a horizontal selection of cover pictures on the main page, like netflix does.
Which means lots of pictures which spread over the screen size and will scroll via mouseover arrows on the right / left side of the screen.
Screenshot:
http://cdn3-i.hitc-s.com/180/netflix_redesign_70590.jpg
Does anyone know how to create that? I'm using Dreamweaver and Muse, got some basic html and css skills, used a bit of jquery code, but i'm not quite firm with it yet.
Bye, Robert
回答1:
If you do not have much experience then I would recommend you use a plugin such as Owl Carousel.
It can do pretty much everything that you want out of the box.
There are plenty of other options out there but this one does have touch support and is responsive as well so it's pretty good.
This blog post lists out lots of them (including Owl Carousel). You will probably get lots of others recommended by other users too.
When do you do have time I would also recommend trying to write your own carousel. It may seem like a waste of time with so many options out there but it really is a good way of enhancing your html, css and javascript.
Carousels are of my favourite example projects to help train junior developers at work.
回答2:
Start with some basic CSS styling:
This will cover the basic look and feel of 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;
}
Add a div to your body to hold the images:
<body>
<div id='hold_images'></div>
</body>
Use jQuery to handle the image and icon appending, image hovering, and smooth scrolling:
The images are captured screenshots saved to an img folder, and a library was used for adding the chevron icons but you can use whatever.
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);
}
});
Result:
EDIT 2019
For those looking for the icon code, this comes from the Azle library. You can add icons to your target element as follows:
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 is the class name of the element that will hold the icon, and target_instance is the instance number of that class. You can see all available icons by running az.show_icons() in your browser console (inspect element).
Rather than write raw JS/jQuery/CSS/HTML, you can code your entire application in Azle. Here is an example Netlix clone application in Azle if you're interested. This HTML file contains all the code needed to generate the clone site:
<!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>
Result:
You can check out the clone here.
来源：https://stackoverflow.com/questions/28013179/horizontal-scrolling-images-like-on-netflix