JavaScript make slides (360 degree panorama) _ form Effects

In the product demo to customers often use slides, with 360-degree panoramic picture effect to bring users a good experience value. Here to introduce a 360 panoramic slideshow from Robert Pataki, this tutorial uses JS to achieve a cool panoramic slide, the details are as follows:

No plug-ins are used in this tutorial, we will use HTML,CSS and JavaScript to implement, of course, also use the jquery framework!

How to achieve it?

We will use the pre-360-generated picture for the carousel to achieve the animation display effect. Contains 180 pictures. So the load time may be longer.

Code implementation

We'll add media queries to the CSS code to make the effect available on both the ipad and the iphone.

1. code files

We add js,css, photo catalogue. Reset.css is included in the CSS catalog. JS contains jquery. The code files are as follows:

2. New projects

Create an HTML file index.html. In

Reset.css and Threesixty.css. Contains custom CSS styles.

<! DOCTYPE html>
 
 

3. Loading progress bar

Create a <div> to accommodate slides. Contains a <ol>, which contains a picture sequence <li>, and also includes a <span> to display the progress bar. We will use JavaScript to dynamically load pictures.

<! DOCTYPE html>
 
  
 
 

4. Add Interactive

Code Finally, we add jquery to handle the interaction, threesixity.js to handle the picture slides.

<! DOCTYPE html>
 
 

5. Style

We add threesixty.css files. RESET.CSS is used to set the default style. First define the #threesixty wrapper. The default picture slideshow is 960x450. Center horizontally vertically.

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

The above content is to use JavaScript to make the entire content of the slide, I hope you like.