Home >Web Front-end >JS Tutorial >Create slideshow (360-degree panoramic picture) with javascript_form special effects

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

WBOYOriginal: 2016-05-16 15:48:391801browse

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>

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>

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>

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

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A Super Guide to Programming with Browserify with jQuery_jqueryNext article：A Super Guide to Programming with Browserify with jQuery_jquery

See more

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

Related articles