The production of slides in the page

 

Take the slideshow in the index.html page of Tiantian Fresh as an example, the code is as follows, you need to take a look at the code of the index.html page

 

Principle: Several pictures of the slide are placed in a position on the page in an absolute positioning manner, and are superimposed on each other.



$(function(){
	var $slides = $('.slide_pics li');
	
	//Define how many pictures there are, here are 4
	var len = $slides.length;
	var nowli = 0; //The li that will be moved is the picture li you click to see, and the serial number starts from 0
	var prevli = 0; // the current li to leave
	var $prev = $('.prev'); //Define a variable for the left arrow
	var $next = $('.next'); //The arrow on the right defines the variable
	var ismove = false;
	var timer = null; // define a placeholder for a timer
	
	//The width of each li is 760, here all the pictures except the first picture are put to the right
	$slides.not(':first').css({left:760});
	
	//
	$slides.each(function(index, el) {
		var $li = $('<li>'); //Create a li tag, which is the scroll point below

		if(index==0) //Set the style of the first li to be highlighted
		{
			$li.addClass('active');
		}

		$li.appendTo($('.points')); //Achieves appending <li> scroll points to the page
	});
	
	
	$points = $('.points li'); //Select 4 points
	
	timer = setInterval(autoplay,4000);//The timer puts the picture every 4 seconds to realize the automatic playback of the slideshow

	
	/ / Realize that when the mouse is placed on the slide, stop playing, and continue to play after the mouse is removed
	$('.slide').mouseenter(function() {
		clearInterval(timer); //Clear the timer
	});

	$('.slide').mouseleave(function() {
		timer = setInterval(autoplay,4000);
	});

	
	//The slideshow plays automatically, which is actually the same as the right arrow binding event
	function autoplay(){
		nowli ++;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');
	}

	
	//Bind the event on the scroll point, so that when you click the scroll point, you can jump to the corresponding slide
	$points.click(function(event) {
		if(ismove)
		{
			return;
		}
		
		
		nowli = $(this).index(); //Select the index value of the picture you want to move

		
		/ / Eliminate the bug that occurs when you repeatedly click to select the li point of the picture
		if(nowli==prevli)
		{
			return;
		}
		
		$(this).addClass('active').siblings().removeClass('active'); //The color of the selected point will change
		move(); //move function to define movement, which is defined later is function move()

	});

	
	//Left arrow binding event
	$prev.click(function() {
		if(ismove)
		{
			return;
		}		
		nowli--;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active'); //When the arrow moves the picture, the points below also move accordingly

	});
	
	//Right arrow binding event
	$next.click(function() {
		if(ismove)
		{
			return;
		}		
		nowli ++;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');

	});


	//move function handles all the movement
	//When the arrow is clicked quickly, there will be some picture display problems, the solution: you can add stop() in front of all animate()
	//例如：$slides.eq(nowli).stop().animate({left:0},800,'easeOutExpo')
	function move(){

		ismove = true;

		if(nowli<0) //If you want to move left on the first picture
		{
			nowli=len-1; //Let the 4th picture come from the left
			prevli = 0
			$slides.eq(nowli).css({left:-760}); //Put the 4th picture on the left first
			$slides.eq(nowli).animate({left:0},800,'easeOutExpo'); //Then put it in the position of the original picture 1
			$slides.eq(prevli).animate({left:760},800,'easeOutExpo',function(){//The position of the original picture 1 is moved to the right
				ismove = false;
			});
			prevli = nowli;
			return; //Do not execute the following conditional judgment statement
		}

		
		//In the 4th picture, when you want to press the right arrow
		if(nowli>len-1)
		{
			nowli = 0; //The picture should be the first picture
			prevli = len-1;
			$slides.eq(nowli).css({left:760});
			$slides.eq(nowli).animate({left:0},800,'easeOutExpo');
			$slides.eq(prevli).animate({left:-760},800,'easeOutExpo',function(){
				ismove = false;
			});
			prevli = nowli;
			return; //The function of return is not to execute the following conditional statement
		}


		if(prevli<nowli) //When looking at the pictures in order from small to large, such as from the first to the second
		{
			$slides.eq(nowli).css({left:760}); //First put the large picture on the right		
			$slides.eq(prevli).animate({left:-760},800,'easeOutExpo');//Put the small picture on the left
			$slides.eq(nowli).animate({left:0},800,'easeOutExpo',function(){ //Then put the large picture in the position of the original small picture
				ismove = false;
			});
			prevli=nowli; //The value of nowli keeps changing, here the value of nowli is assigned to preli
			
		}
		
		//Look at the pictures from big to small
		else
		{			
			$slides.eq(nowli).css({left:-760});			
			$slides.eq(prevli).animate({left:760},800,'easeOutExpo');	
			$slides.eq(nowli).animate({left:0},800,'easeOutExpo',function(){
				ismove = false;
			});
			prevli = nowli;		
		}

	}
})