Native JavaScript to achieve slide effects

When we create a page, especially a homepage, we usually design a navigation bar that can link to other main pages of the entire website, or a paragraph of website introduction text will include the jump to this page. Usually, we will use the title attribute to add some explanatory text to these jump links, but we can enhance the user experience by making a slide demo. When the user moves the mouse to a link, the corresponding image preview will appear below. This not only beautifies the page, but also greatly increases the interactivity of the entire website. Let's make a beautiful slideshow script together.

Preparation: Before making the script, you need to make a picture that should show all the preview effects, as shown below:

index.html

Make an ordered list and add some page links

<body>
 <h1>Simple animation production</h1>
 <p>Link jump target display</p>
 <ol id="list">
 <li>
 <a href="list1.html" >First</a>
 </li>
 <li>
 <a href="list2.html" >Second</a>
 </li>
 <li>
 <a href="list3.html" >Third</a>
 </li>
 </ol>
 <!--Dynamically added image display area>-->
<script src="script.js"></script>
</body>

style.css

Add some styles to this navigation bar

ol{
 padding-left: 20px;
}
ol li{
 display: inline;
 margin-right: 10px;
}
#view{
 width: 600px;
 height: 200px;
 position: absolute;
}
#slideShow{
 width: 200px;
 height: 200px;
 overflow: hidden;
 position: relative;
}

script.js

Implementation ideas:

Before creating a script, let's organize our thoughts and determine what we want to do?
1. Create some nodes to display preview images
2. Add onmouseover event to the a tag
3. The animation effect is completed through the setTimeout() function and the movement of the left and top offsets of the image element (the left and top attributes must be converted to integers when obtaining the set attributes)

/*Shared load*/
function addLoadEvent(fun){
 var oldLoad = window.onload;
 if(typeof oldLoad != "function"){
  window.onload = fun;
 }else{
  window.onload = function(){
   oldLoad();
   fun();
  }
 }
}

/*insertAfter*/
function insertAfter(newNode,oldNode){
 var parent = oldNode.parentNode;
 if(parent.lastChild == oldNode){
  parent.appendChild(newNode);
 }else{
  parent.insertBefore(newNode,oldNode.nextSibling);
 }
}

function show(){
 /* Backward compatibility */
 if(!document.getElementById) return false;
 if(!document.getElementsByTagName) return false;
 if(!document.createElement) return false;

 /*Get the list of lists*/
 var list = document.getElementById("list");

 /*Create an image display area*/
 /*Outer div*/
 var div = document.createElement("div");
 div.setAttribute("id","slideShow");
 /*img*/
 var img = document.createElement("img");
 img.setAttribute("id","view");
 img.setAttribute("src","image.jpg");
 img.setAttribute("alt","Image preview");
 /*Add the insertAfter() function to ensure that the div is immediately after the list*/
 insertAfter(div,list);
 div.appendChild(img);

 /*bind event*/
 var a = list.getElementsByTagName("a");
 a[0].onmouseover = function(){
  moveElement("view",0,0,10);
 };
 a[1].onmouseover = function(){
  moveElement("view",-200,0,10);
 };
 a[2].onmouseover = function(){
  moveElement("view",-400,0,10);
 };
}


/*The meaning of the movement* parameters: the id of the element where the image is located; the offset to the left that the image should be moved; the upper offset; the time*/
function moveElement(elementID,left,top,interval){
 /* Backward compatibility */
 if(!document.getElementById) return false;
 if(!document.getElementById(elementID)) return false;

 /*Get the image*/
 var img = document.getElementById(elementID);

 /*Determine whether the current element is already in an animation function*Prevent animation accumulation*/
 if(img.moveNow){
  /* Clear the animation stack */
  clearTimeout(img.moveNow);
 }

 /*Determine whether the element has left and top set*/
 if(!img.style.left){
  img.style.left = "0px";
 }
 if(!img.style.top){
  img.style.top = "0px";
 }


 /*Get the current position of the image* The value obtained at this time is in string format, use parseInt() to force it to be converted into a string*/
 var oldLeft = parseInt(img.style.left);
 var oldTop = parseInt(img.style.top);

 /*Compare the current position with the target position*/
 if(oldLeft == left && oldTop == top){
  return true;
 }

 /*To ensure user experience, the movement should be faster when the moving distance is large*When the moving distance is small, it can be slower*Judge the moving distance based on the distance difference, and move 1/10 of the distance difference each time
 */
 /*The dist variable is used to store the distance between the current offset and the target offset*/
 var dist = 0;
 if(oldLeft < left){
  /*ceil() rounds up to prevent decimals and numbers less than 1*/
  dist = Math.ceil((left-oldLeft)/10);
  oldLeft = oldLeft+dist;
 }
 if (oldLeft > left) {
  dist = Math.ceil((oldLeft-left)/10);
  oldLeft = oldLeft - dist;
 }
 if(oldTop < top){
  dist = Math.ceil((top-oldTop)/10);
  oldTop = oldTop+dist;
 }
 if(oldTop > top){
  dist = Math.ceil((oldTop-top)/10);
  oldTop = oldTop - dist;
 }

 /*move*/
 img.style.left = oldLeft+"px";
 img.style.top = oldTop+"px";

 /*Call function*/
 var result = "moveElement('"+elementID+"',"+left+","+top+","+interval+")";
 /*Set the function that executes the animation as an attribute of this element*/
 img.moveNow = setTimeout(result,interval);
}

addLoadEvent(show);

Final execution effect

At this time, when we move the mouse to different list items, the pictures under the list will move to the corresponding preview image position.

At this point, a simple slideshow demo has been completed.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Implementation of js slides
JavaScript to achieve the slide effect source code of picture switching
Beautiful js tab image rotation effect code (customizable slideshow and image buffer switching)
JS+FLASH slideshow picture script, the code is organized to make it more convenient to call!
Using JavaScript to create maintainable slideshow code
js to achieve slide show picture sample code
Slideshow switching effect implemented by JS
JS realizes the effect of playing multiple pictures in turn
How to implement Taobao slideshow effect using JS
js with some automatic picture carousel slideshow special effects code sharing

<<: The simplest solution to the problem that Sublime Text cannot input Chinese in Ubuntu

>>: How to modify the default storage engine in MySQL