[Sanshi jQuery video tutorial] 01. Circular image display, sanshi jquery

[Sanshi jQuery video tutorial] 01. Circular image display, sanshi jquery

Video address: http://v.qq.com/page/e/5/t/e0149n5he5t.html

 

Hello everyone, welcome to [sanshi jQuery video tutorial]. I am your old friend-sanshi.

Today, we will use basic HTML, CSS, and jQuery to achieve a super simple picture loop display effect. Let's look at the final product:

 

Step 1: website directory

The website directory is very simple and contains three parts: the lesson1.html file, the lib directory, and the images directory.

Here, lesson1.html contains the most basic part of a page. Setting DOCTYPE correctly helps the page to be correctly rendered in modern browsers.

<! DOCTYPE html> 
 
The lib directory only contains the latest jQuery library. The images directory contains 6 large images and 6 small images (the small images are placed in the images/small subdirectory ).
 
Step 2: Page Structure
Add basic html tags to the page, including content blocks with id = main and hyperlinks with class = showit.
<! DOCTYPE html> 
　　
 
 
Step 3: CSS style
Next we will create a basic CSS style to make the default display look more professional and beautiful. Our efforts include:
<style>body{background-color: #efefef;}#main {border: solid 1px #ccc;background-color: #fff;max-width: 500px;padding: 20px;margin: 20px auto;}.showit {text-decoration: none;}</style>
　　
The page displays the following results:


 
Step 4: display a large image
The following is the time for jQuery to appear. The homepage introduces the jQuery Library at the bottom of the page.
Note: It is recommended to place all JavaScript scripts on the page at the bottom of the page, so that the basic HTML structure of the page can be displayed more quickly.
Basic logic:

  

 
   
The user clicks the class = showit hyperlink. 
    
 
     
Determine whether the big image node with id = showbox exists 
      
 
       
If not, create a big image node and add it to document. body.
 
      
 
     
Find the img label inside the big chart node and set its src attribute to the href attribute of the clicked hyperlink.
 
     
Prevent the default behavior event. preventDefault () of hyperlinks ()
 
    

  
Let's take a look at the corresponding implementation code:
<script>$(function() {$('.showit').click(function(event) {var largeImageUrl = $(this).attr('href');var boxEl = $('#showbox');if(!boxEl.length) {boxEl = $('<div>', {id: 'showbox',html: ''}).appendTo(document.body);}boxEl.find('img').attr('src', largeImageUrl);boxEl.show();event.preventDefault();});</script>
 
Click the thumbnail on the page to display the following results:
　　
 
Step 5: CSS style of a large image
When a style is not created for a large image, the big image is displayed next to the main structure of the page. The style is created below:
#showbox {position: absolute;top: 0;left: 0;background-color: #000;width: 100%;height: 100%;text-align: center;}#showbox img {max-width: 500px;margin-top: 100px;box-shadow: 0 0 20px #fff;border-radius: 10px;}
Page effect:
 
Step 6: Click to hide the large image
After the page is loaded for the first time, the # showbox node does not exist. It is created only when you click the thumbnail for the first time.
The following code cannot run properly:
$('#showbox').click(function(event) {$(this).hide();});
 
We need to use the on function provided by jQuery to register click events, even if the point does not exist during event registration:
$(document.body).on('click', '#showbox', function(event) {$(this).hide();});
 
Step 7: Click the left and right sides of the image
Now we need to click the right half of the image to navigate to the next image. On the contrary, if we click the left half of the image, we will navigate to the previous image.
To achieve this, we need to know which part of the image is currently clicked. Let's take a look at the knowledge needed to implement this function:
$(document.body).on('click', '#showbox', function(event) {       var targetEl = $(event.target);if(targetEl.is('img')) {var imageLeft = targetEl.offset().left;var imageHalfX = imageLeft + targetEl.outerWidth() / 2;if(event.pageX > imageHalfX) {alert('click right part');} else {alert('click left part');}} else {$(this).hide();}});
　　
 
Step 8: cache all big charts on the page
Next, we need to know what the previous and next images are compared with the currently displayed images?
We use two functions to obtain the image to be displayed and complete the JavaScript code of the topic, as shown below:
$(document.body).on('click', '#showbox', function(event) {            var targetEl = $(event.target);if(targetEl.is('img')) {var imageLeft = targetEl.offset().left;var imageHalfX = imageLeft + targetEl.outerWidth() / 2;var imageUrl = targetEl.attr('src');var nextImageUrl;if(event.pageX > imageHalfX) {nextImageUrl = getNextImageUrl(imageUrl);} else {nextImageUrl = getPrevImageUrl(imageUrl);}if(nextImageUrl) {targetEl.attr('src', nextImageUrl);}} else {$(this).hide();}});
 
To precisely locate all the images on the page, I need a cache array to record these images:
var cachedImageUrls;
Then define a function to initialize this array. To avoid multiple initialization, we made a non-null judgment:
function cacheImageUrls() {if(!cachedImageUrls) {cachedImageUrls = $('.showit').map(function() {return $(this).attr('href');});   }}
Here, the map function of jQuery provides us with great convenience. The map function maps a jQuery object to an array, and the return in the function determines each item in the array.
After this function is executed, the data in cachedImageUrls is as follows:
["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg"]
　　
Step 9: Get the previous and next images
After getting all the big image arrays on the page, we can easily calculate the previous or next image of the current image. Pay attention to the following array boundary check:
function getNextImageUrl(imageUrl) {cacheImageUrls();var imageUrlIndex = $.inArray(imageUrl, cachedImageUrls);if(imageUrlIndex >= 0) {imageUrlIndex++;if(imageUrlIndex >= cachedImageUrls.length) {imageUrlIndex = 0;}return cachedImageUrls[imageUrlIndex];}}
Note: The inArray function provided by jQuery is used to find the index of an element in the array. If the returned value is smaller than zero, this element does not exist in the array.
 
Step 10: complete JavaScript code
Finally, let's look at the complete JavaScript code:
$(function() {        $('.showit').click(function(event) {var largeImageUrl = $(this).attr('href');var boxEl = $('#showbox');if(!boxEl.length) {boxEl = $('<div>', {id: 'showbox',html: ''}).appendTo(document.body);}boxEl.find('img').attr('src', largeImageUrl);boxEl.show();event.preventDefault();});var cachedImageUrls;function cacheImageUrls() {if(!cachedImageUrls) {cachedImageUrls = $('.showit').map(function() {return $(this).attr('href');});   }}function getNextImageUrl(imageUrl) {cacheImageUrls();var imageUrlIndex = $.inArray(imageUrl, cachedImageUrls);if(imageUrlIndex >= 0) {imageUrlIndex++;if(imageUrlIndex >= cachedImageUrls.length) {imageUrlIndex = 0;}return cachedImageUrls[imageUrlIndex];}}function getPrevImageUrl(imageUrl) {cacheImageUrls();var imageUrlIndex = $.inArray(imageUrl, cachedImageUrls);if(imageUrlIndex >= 0) {imageUrlIndex--;if(imageUrlIndex < 0) {imageUrlIndex = cachedImageUrls.length - 1;}return cachedImageUrls[imageUrlIndex];}}$(document.body).on('click', '#showbox', function(event) {var targetEl = $(event.target);if(targetEl.is('img')) {var imageLeft = targetEl.offset().left;var imageHalfX = imageLeft + targetEl.outerWidth() / 2;var imageUrl = targetEl.attr('src');var nextImageUrl;if(event.pageX > imageHalfX) {nextImageUrl = getNextImageUrl(imageUrl);} else {nextImageUrl = getPrevImageUrl(imageUrl);}if(nextImageUrl) {targetEl.attr('src', nextImageUrl);}} else {$(this).hide();}});});
　　
Source code and video download

  

 
   
Download source code and video: http://fineui.com/doc
 
   
Follow our public account: FineUI



  
Sanshi!