Create slideshow (360-degree panoramic picture) with javascript

Create slideshow (360-degree panoramic picture) with javascript_form special effects

WBOY

Release： 2016-05-16 15:48:39

Original

1802 people have browsed it

Slides are often used when giving product demonstrations to customers. The 360-degree panoramic picture effect brings good experience value to users. Here I would like to introduce to you a 360 panoramic slideshow implementation tutorial from Robert Pataki. This tutorial uses js to implement a cool panoramic slideshow. The specific content is as follows:

No plug-ins are used in this tutorial. We will use HTML, css and javascript to implement it. Of course, we also use the jQuery framework!

How to achieve it?

We will use pre-generated 360-degree images for carousel to achieve the animation display effect. Contains 180 images. So the loading time may be longer.

Code implementation

We will add media queries to the css code so that this effect can be achieved on both iPad and iPhone.

1. Code file

We add js, css, and image directories. The css directory contains reset.css. js contains jQuery. The code file is as follows:

Create slideshow (360-degree panoramic picture) with javascript_form special effects

2. New projects

Create an HTML file index.html. In

we set the viewport of the mobile device so that the content does not support scaling. Add two files

reset.css and threesixty.css. Contains custom css styles.

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
</body>
</html>

Copy after login

3. Loading progress bar

Create a

to hold the slideshow. It contains an

, and a to display the progress bar. We will use javascript to dynamically load images.

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
<divid="threesixty">
<divid="spinner">
<span>0%</span>
</div>
<olid="threesixty_images"></ol>
</div>
</body>
</html>

Copy after login

4. Add interaction

At the end of the code, we add jQuery to handle interaction and threesixity.js to handle image slideshows.

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
<divid="threesixty">
<divid="spinner">
<span>0%</span>
</div>
<olid="threesixty_images"></ol>
</div>
<scriptsrc="js/heartcode-canvasloader-min.js"></script>
<scriptsrc="js/jquery-1.7.min.js"></script>
<scriptsrc="js/threesixty.js"></script>
</body>
</html>

Copy after login

5. Style

We add the threesixty.css file. reset.css is used to set the default style. First define the #threesixty wrapper. The default picture slideshow is 960x450. Centered horizontally and vertically.

#threesixty {
position:absolute;
overflow:hidden;
top:50%;
left:50%;
width:960px;
height:540px;
margin-left:-480px;
margin-top:-270p

Copy after login

The above content is all about using javascript to create a slideshow. I hope you like it.