Image scrolling transition effect

//I am writing a blog for the first time as a student, and it involves a lot of problems. I hope you can give me more pointers

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
	  <script src="jquery-1.11.3.js"></script>
     <style>
    * {
      margin: 0;
      padding: 0
    }
 
    ul {
      list-style: none
    }
 
    img {
      vertical-align: top;
	  width: 550px;
      height: 200px;
    }
 
    .box {
      width: 550px;
      height: 200px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }
 
    .inner {
      width: 550px;
      height: 200px;
      background-color: pink;
      overflow: hidden;
      position: relative;
    }
 
    .inner ul {
      width: 1000%;
      position: absolute;
      top: 0;
      left: 0;
    }
 
    .inner li {
      float: left;
    }
 
    .square {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
 
    .square span {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #fff;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
    }
    .square span.current {
      background-color: orangered;
      color: #fff;
    }
  </style>
  </head>
  <body>
    <div class="box" id="box">
      <div class="inner">
        <ul id="ulhd">
          <li><a href="#"><img src="banner_01.jpg" /></a></li>
          <li><a href="#"><img src="banner_02.jpg" /></a></li>
          <li><a href="#"><img src="banner_03.jpg" /></a></li>
          <li><a href="#"><img src="banner_04.jpg" /></a></li>
          <li><a href="#"><img src="banner_05.jpg" /></a></li>
        </ul>
        <div class="square">
          <span class="current">1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
        </div>
      </div>
    </div>
  <script>
var timer = zero;
function ulhudong(){
//First get the value of Ul's left;
var lleft=parseInt($("#ulhd").css("left"));
// Slide the width of an image to the left each time (-550px);
	$("#ulhd").animate({"left":(lleft-550)});
//Find the next span element with class current attribute and add the class current attribute
   $(".current+span").attr("class","current");
//Remove the class of the element whose class is the current attribute
	$(".current:first").removeAttr("class","current");
//If the left value is always less than -1650,
	if(lleft>=-1650){
//Use the timer to execute ulhudong() every 3s,
		timer=setTimeout(ulhudong,3000);
	}
	else{
//When the last image is loaded, reload the page
	location.reload();
	//ulhudong();
	}
}
	 timer=setTimeout(ulhudong,3000);
// Find all span elements and add mouse movement events
	 $(".square>span").mouseover(function(event){
// clear the timer
		 clearTimeout(timer);
		 timer = null;
//get the source object
		 var e=window.event||arguments[0];
		 var src= e.srcElement||e.target;
/ / Determine whether it is a SPAN element
		 if(src.nodeName=="SPAN"){
//If you add a style to the element on which the mouse is placed, and determine which span element it is based on the text content, the image position corresponds to the span element
			 $(".current").removeAttr("class","current");
			 $(src).attr("class","current");
			 if($(src).text()=="1"){
				$(ulhd).css("left",0);
			 }
			else if($(src).text()=="2"){
				$(ulhd).css("left",-550);
			 }
			else if($(src).text()=="3"){
				$(ulhd).css("left",-1100);
			}
			else if($(src).text()=="4"){
				$(ulhd).css("left",-1650);
			 }
		    else{
				$(ulhd).css("left",-2150);
			}
		 }
	 });
//When the mouse leaves, call ulhudong() again;
	 $(".square>span").mouseout(function(event){
		 var e=window.event||arguments[0];
		 var src= e.srcElement||e.target;
		  if(src.nodeName=="SPAN"){
			ulhudong();
		  }
	 });
  </script>
  </body>
</html>
Image scrolling transition effect

Guess you like
