当前位置：网站首页>JS -- realize the rotation chart (complete function)

JS -- realize the rotation chart (complete function)

2022-07-28 15:03:00 【Dream rain in flowers】

Didn't mention the details list , But basically all the important steps are explained in the code ~~

Personally, I think the most difficult thing is ：

How to automatically play to the last picture , Instantly switch back to the first picture and replay ？

Here, a more ingenious method is adopted , For example, I used four example pictures , Then I add the first one to the end again , this is it ：
Insert picture description here
And then in setA Function , Make such a judgment 

		if (index >= imgArr.length - 1) {
    
			index = 0
			//  At this time, we set , The last picture is the same as the first one ,
			//  So by css Switch the last instant to the first ！！！
			ul.style.left = 0
		}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- tool.js Medium move function  -->
		<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
    
				margin: 0;
				padding: 0;
			}

			/*  total div The style of  */
			#outer {
    
				/*  The width of the picture is 640,li The set sitting and right outer margins are 10, So the width of the outer container is set to 660px */
				width: 660px;
				height: 639px;
				background-color: #bfa;
				margin: 50px auto;
				padding: 10px 0;
				/*  The son is the father  */
				position: relative;
				/*  Cut off the elements outside its own width  */
				overflow: hidden;
			}

			/* ul The style of  */
			#ul {
    
				/*  Take out a little bit  */
				list-style: none;
				/* （ Picture width 640+ The outer margin between pictures 10+10）x 4 */
				width: 2640px;
				/*  Turn on absolute positioning , Easy to move left To show different pictures  */
				position: absolute;
				/*  adopt js To control left Value  */
				left: 0px;

			}

			/*  Picture on li in  */
			#ul li {
    
				/* li It's an element , Arrange the pictures in one line by floating  */
				float: left;
				/*  The outer margin between pictures  */
				margin: 0 10px;
			}

			/*  The style of the navigation bar below the picture  */
			#navDiv {
    
				/*  Turn on absolute positioning , To move it under the picture  */
				position: absolute;
				/*  Move the position to the bottom  */
				bottom: 20px;
			}

			/*  Each navigation grid is a hyperlink , Bind with the pictures in the corresponding order  */
			#navDiv a {
    
				width: 20px;
				height: 20px;
				/*  Inline elements cannot be set width or height , Therefore, it is converted into inline block elements  */
				display: inline-block;
				background-color: #00CC00;
				margin: 0 10px;
				/*  Transparent effect  */
				opacity: 0.5;
			}

			#navDiv a:hover {
    
				background-color: black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
    
				//  Get the array of saved pictures 
				var imgArr = document.getElementsByTagName("img")

				var ul = document.getElementById("ul")
				//  Set up ul Dynamic width of 
				ul.style.width = 660 * imgArr.length + "px"

				var navDiv = document.getElementById("navDiv")
				var outer = document.getElementById("outer")
				//  The navigation bar is centered 
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px"

				//  The first picture is selected by default 
				var index = 0
				var allA = document.getElementsByTagName("a")
				allA[index].style.backgroundColor = "black"

				//  Create an auto switch picture function 
				var flag

				function autoChange() {
    
					flag = setInterval(function() {
    
						//  The index on the 
						index++
						//  Prevent the index from exceeding the number of pictures 
						index %= imgArr.length
						// move Functions are stored in tools Inside 
						move(ul, "left", -660 * index, 20, function() {
    
							//  Modify navigation points , Let it change with the switching of pictures 
							setA()
						})
					}, 2000)
				}

				autoChange()

				//  Click on li Hyperlink in , Display the pictures in the corresponding order , Bind stand-alone response functions to all hyperlinks 
				for (var i = 0; i < allA.length; i++) {
    
					//  Add one for each hyperlink num attribute 
					allA[i].num = i
					allA[i].onclick = function() {
    
						clearInterval(flag)
						// alert(this.num)
						//  Get the index of hyperlinks 
						index = this.num
						setA()  
						//  Use move Function to switch pictures 
						move(ul, "left", -660 * index, 30, function() {
    
							//  After the stand-alone animation , The picture should continue to play automatically 
							autoChange()
						})
					}
				}
				//  Set a method specifically to set the selected hyperlink （ Navigation block ） 
				function setA() {
    
					//  Judge whether the current index is the last picture 
					if (index >= imgArr.length - 1) {
    
						index = 0
						//  At this time, we set , The last picture is the same as the first one ,
						//  So by css Switch the last instant to the first ！！！
						ul.style.left = 0
					}
					//  Traverse all a, Set up lvse
					for (var i = 0; i < allA.length; i++) {
    
						//  But the number of periods is set to an empty string , Prevent this attribute from becoming inline style and eliminating hovor effect 
						allA[i].style.backgroundColor = ""
					}
					//  Will be selected a black 
					allA[index].style.backgroundColor = "black"
				}
			}
		</script>
	</head>
	<body>
		<div id="outer">
			<ul id="ul">
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<!--  Add a first picture at the end  -->
				<li><img src="img/1.jpg"></li>
			</ul>

			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<!-- <a href="javascript:;"></a> -->
			</div>
		</div>
	</body>
</html>

tool.js Medium move function ：

//  Encapsulate as a function 
				
				// var flag


	function move(obj, attr, target, speed, callBack){
    
			/* * obj： move objects  * attr： Execution style  * target： Target location  * speed： Movement speed  * callBack： Callback function  */
		clearInterval(obj.flag)
		
		var current = parseInt(window.getComputedStyle(obj, null)[attr])
		
		if(current > target){
    
			speed = -speed
		}
			
		obj.flag = setInterval(function(){
    
			var oldValue = parseInt(window.getComputedStyle(obj, null)[attr])
			var newValue = oldValue + speed
			
			if(speed > 0 && newValue > target || speed < 0 && newValue < target){
    
				newValue = target
			}
				
			obj.style[attr] = newValue + "px"
			
			if(newValue == target){
    
				clearInterval(obj.flag)
				callBack && callBack()
			}
		}, 30)
	}
原网站

版权声明
本文为[Dream rain in flowers]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/196/202207130916583702.html

边栏推荐

猜你喜欢

随机推荐