원키 생성 윤방도 반너 플러그인 코드

갑자기 한 페이지에 한 번만 쓸 수 있는 것 같아. [dog][dog], 보시면 돼요.
원클릭으로 윤방도 생성
이것은 내가 만든 작은 demo인데 아직 그림 경로를 입력하여 윤방도를 생성하는 다른 양식 선택은 완벽하지 않다
구현 기능:

자동 로터리

좌우 버튼 상호 전환

타겟 div에 따른 자동 크기 조정

원키로 아래 전환의 점 0.0 생성

전환 시 클릭 불가

외층div 설정 가능한 크기는 목표div에 따라 자동으로 어울리며 원각, 중심 등 스타일의 기본 넘침 숨기기를 설정할 수 있음

사진 한 장도 좌우 라운드 방송

가능

이미지 삽입 상한선 없음

이미지당 웹 주소

직접 복사해서 js에 직접 인용할 수 있다(js 주석에 상세한 예가 있고 직접 논평할 수 있는 곳이 없다)

버그가 발생할 수 있으니 많이 포함

언제든지 지적해 주십시오

속도를 쓸 수 있고 모든 사진과 링크된 사이트는 상응하는 형식에 따라 이미지 경로와 사이트 주소를 수조로 삽입할 수 있다. 버그 기술이 있을 수 있다. 신인들이 많이 포괄할 수 있는 것은 매우 간단하다. 자바스크립트 원리는 생성된 내용을 목표 요소에 추가하는 데 어떤 문제가 있는지 직접 논평할 수 있다.



<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
head>
<body>
	<div class="oDiv">div>
	<script src="./banner.js">script>
	<script>
		rotationChart('.oDiv', ['1.jpg'], 2000,['http://www.zzccccc.cn']);
	script>
body>
html>

JavaScript



//    ：  
//   ：2020/2/5
//   ：       
//   ：rotationChart('   ¸    ', ['  ','  index   ', 2000         2000ms   2000       ， ['  ','      #'           ]);
//  ： rotationChart('.oDiv', ['./images/1.png'], 2000,['http://www.zzccccc.cn']);

//   ：rotationChart('', ['', ''], 2000,['','']);
// 				   	                   


Object.prototype.rotationChart = function(demo, target, time, href, style) {
	
	// demo = document.querySelector(demo)

	//      
	if (demo.substring(0,1) == '.') {
		demo = demo.substr(1);
		demo = document.getElementsByClassName(demo)[0];
	}else if (demo.substring(0, 1) == '#') {
		demo = demo.substr(1);
		demo = document.getElementById(demo);
	}else{
		demo = document.getElementsByTagName(demo)[0];
	}

	if (time == undefined || time < 2000) {
			time = 2000;
	}
	
	//    div
	oDiv_box = document.createElement('div');
	demo.appendChild(oDiv_box);
		//    div   a
		function oDiv_content_box () {
			
			var oDiv_content = document.createElement('div');
			oDiv_box.appendChild(oDiv_content);
			oDiv_content.appendChild(oDiv_a);

			oDiv_a.appendChild(oDiv_img);
			oDiv_content.style.float = 'left';
			oDiv_content.style.width = 100 / (target.length + 2) + '%';
			oDiv_img.style.width = '100%';


		};

		//       div  a
		var oDiv_a = document.createElement('a');
		if (href != undefined) {
			oDiv_a.setAttribute('href', href[target.length - 1]);
		}
		var oDiv_img = document.createElement('img');
		oDiv_content_box();
		oDiv_img.setAttribute('src', target[target.length - 1]);

	//   a   div  
	for (var i = 0; i < target.length; i ++) {	

		var oDiv_a = document.createElement('a');
		var oDiv_content = document.createElement('div');
		oDiv_box.appendChild(oDiv_content);
		oDiv_content.appendChild(oDiv_a);
		var oDiv_img = document.createElement('img');
		oDiv_a.appendChild(oDiv_img);
		oDiv_img.setAttribute('src', target[i]);
		
		//  a       
		if (href != undefined) {
			oDiv_a.setAttribute('href', href[i]);
		}

		oDiv_box.style.width = (target.length + 2) * 100 + '%';
		oDiv_content.style.float = 'left';
		oDiv_img.style.width = '100%';
		oDiv_content.style.width = 100 / (target.length + 2) + '%';

	};
		//   div   
		oDiv_box.style.position = "relative";
		oDiv_box.style.left = '0';
		oDiv_box.style.transition = 'all 1s'
		oDiv_box.style.overflow = 'hidden';
		oDiv_box.style.left = "-100%"
		var oDiv_a = document.createElement('a');
		var oDiv_img = document.createElement('img');
		if (href != undefined) {
			oDiv_a.setAttribute('href', href[0]);
		}
		oDiv_content_box();
		oDiv_img.setAttribute('src', target[0]);
	//         
	var oDiv_left = document.createElement('div');	
	var oDiv_right = document.createElement('div');	
	demo.appendChild(oDiv_left);
	demo.appendChild(oDiv_right);
	oDiv_left.setAttribute('id', 'oDiv_left');
	oDiv_right.setAttribute('id', 'oDiv_right');
	oDiv_right.setAttribute('style', 'width:70px;height:100px;background:rgba(0,0,0,.3);position:absolute;top:calc(50% - 50px);left:20px;font-size:70px;line-hight:70px;text-align:center;color:#fff;cursor: pointer;transition:all .5s;');
	oDiv_left.setAttribute('style', 'width:70px;height:100px;background:rgba(0,0,0,.3);position:absolute;top:calc(50% - 50px);right:20px;font-size:70px;line-hight:70px;text-align:center;color:#fff;cursor: pointer;transition:all .5s;');
	if (screen.width < 800) {
		oDiv_right.style.opacity = "1";
		oDiv_left.style.opacity = "1";
		oDiv_left.style.width = "50px";
		oDiv_left.style.height = "60px";
		oDiv_left.style.lineHeight = "60px";
		oDiv_left.style.fontSize = "35px";
		oDiv_left.style.top = "calc(50% - 30px)";
		oDiv_right.style.width = "50px";
		oDiv_right.style.height = "60px";
		oDiv_right.style.lineHeight = "60px";
		oDiv_right.style.fontSize = "35px";
		oDiv_right.style.top = "calc(50% - 30px)";
	}else {
		oDiv_right.style.opacity = "0";
		oDiv_left.style.opacity = "0";
	}
	oDiv_left.innerHTML = ">"; 
	oDiv_right.innerHTML = ";
	//             
	var keep = 100;
	var spot_number = 0;
	var	spot_number_two = 0;
	var key = 0;
	var time;
		oDiv_left.onclick = function () {
				
				if (key == 0) {
						spot_number_two ++;
					if (spot_number_two == target.length + 1) {
						spot_number --;
						spot_number_two = 0;
						
					}
					if (spot_number == target.length - 1) {
						spot_number = -1;
					}
					
					
					if (keep == (target.length + 1) * 100) {
						oDiv_box.style.transition = 'all 0s'
						keep = 0;
						oDiv_box.style.left = -keep + '%';
						
						setTimeout(function () {
							oDiv_box.style.transition = 'all 1s'
						}, 5)
						
						
						setTimeout('oDiv_left.onclick()', 5)

					}
					
					spot_number ++;
					keep += 100;
					oDiv_box.style.left = -keep + '%';

					for (var i = 0;i < target.length; i ++) {
						spot[i].style.background = "#17A7CD";
						spot[spot_number].style.background = "#00305d";
					}

					key = 0;
					setTimeout(function () {
							key = 1
						}, 10)
					setTimeout(function () {
						key = 0
					}, 1000);
				}
				
		}

		oDiv_right.onclick = function () {
				
				if (key == 0) {
					spot_number_two --;
					spot_number --;
					if (spot_number == -1) {
						spot_number = target.length - 1;
					}
					for (var i = 0;i < target.length; i ++) {
						spot[i].style.background = "#17A7CD";
						spot[spot_number].style.background = "#00305d";
					}
					if (spot_number_two == -1) {
						spot_number ++;
						spot_number_two = target.length;
					}

					if (keep == 0) {
						oDiv_box.style.transition = 'all 0s'
						keep = (target.length + 1) * 100;
						oDiv_box.style.left = -keep + '%';
						
						setTimeout(function () {
							oDiv_box.style.transition = 'all 1s'
						}, 5)
						setTimeout('oDiv_right.onclick()', 10)
					}
					
					keep -= 100;
					oDiv_box.style.left = -keep + '%';

					key = 0;
					setTimeout(function () {
							key = 1
						}, 10)
					setTimeout(function () {
						key = 0
					}, 1000);
				}

		}

		clearInterval(roll)
		var roll = setInterval('oDiv_right.onclick()', time);

		//                
		demo.onmousemove = function () {
			clearInterval(roll);
			oDiv_left.style.opacity = "1";
			oDiv_right.style.opacity = "1";
		}
		demo.onmouseout = function () {
			roll = setInterval('oDiv_left.onclick()', time);
			
			if (screen.width > 500) {
				oDiv_left.style.opacity = "0";
				oDiv_right.style.opacity = "0";
			}
		}

		//   div   
		demo.style.overflow = 'hidden';
		demo.style.position = 'relative';

		//      
		var oDiv_spots = document.createElement('div'); 
		demo.appendChild(oDiv_spots);

		//     
			
		
		if (screen.width < 800) {
			var oDiv_number = (54 * target.length / 2) + 'px';	
			oDiv_spots.setAttribute('style', 'position:absolute;top:80%;left:calc(50% - ' + oDiv_number + ');')
		}else {
			var oDiv_number = (24 * target.length / 2) + 'px';	
			oDiv_spots.setAttribute('style', 'position:absolute;top:93%;left:calc(50% - ' + oDiv_number + ');')
		}

		var spot = document.getElementsByClassName('spot')
		setTimeout(function () {
			spot[0].style.background = "#00305d";
		}, 5)
		//            
		for (var i = 0; i < target.length; i ++) {

			var oDiv_spot = document.createElement('div')
			oDiv_spots.appendChild(oDiv_spot);
			// oDiv_spot.setAttribute('style', 'float:left;margin: 0px 10px;width:10px;height:10px;background:#17A7CD;border:2px solid #fff;border-radius:20px;position:relative;cursor:pointer')
			oDiv_spot.setAttribute('class', 'spot');
			if (screen.width < 500) {
				oDiv_spot.setAttribute('style', 'float:left;margin: 0px 10px;width:30px;height:15px;background:#17A7CD;border:2px solid #fff;border-radius:20px;position:relative;cursor:pointer')
			}else {
				oDiv_spot.setAttribute('style', 'float:left;margin: 0px 10px;width:10px;height:10px;background:#17A7CD;border:2px solid #fff;border-radius:20px;position:relative;cursor:pointer')
			}

			spot[i].index = i;
			spot[i].onclick = function (index) {
				keep = (this.index + 1) * 100;
				oDiv_box.style.left = -keep + '%';
				for (var j = 0; j < target.length; j ++) {
					spot[j].style.background = "#17A7CD";
					this.style.background = "#00305d"
				}	
			}
		}
		

}

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Mac의 빠른 검색을 위한 플러그인

Mac의 표준 기능에는 빠른 검색(Quick Look)이 있습니다. 파일을 선택하고 공백을 누르면 미리 보기를 쉽게 표시할 수 있습니다. 표준이면 텍스트 파일, PDF, 이미지 등을 표시할 수 있습니다. 여기서는 편...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

원키 생성 윤방도 반너 플러그인 코드

좋은 웹페이지 즐겨찾기