코드 정리/Jquery6 Jquery 예제 setTimeout을 이용한 실시간 스크립트 네이버 실시간 검색어 순위와 같은 작은 박스 안에서 요소들이 순서대로 보이도록 만드는 예제 기본구조 1말티즈 2요크셔테리어 3이탈리안 그레이 하운드 4불독 5시추 6포메라니안 7비숑 프리제 8꼬똥 드 툴레아 9푸들 setTimeout(function(){실행문},시간) => 지연시간 뒤에 실행할 함수를 설정 => 지정한 일정 시간이 지난 후에 1회만 실행 const ticker = function(){ setTimeout(function(){ $('#ticker li:first').animate({ marginTop: '-20px' },400, function(){ $(this).detach().appendTo('ul#ticker').removeAttr('style') // 첫번째 li요소를 -margi.. 2023. 4. 16. Jquery 예제 썸네일 이미지 클릭시 메인 이미지 교체 및 글 올라오기 작은 이미지를 클릭하면 큰 이미지가 교체되고 설명 글이 올라오는 예제 기본 구조 2023. 4. 16. Jquery bxslider연결하여 사용하기 bxslider 파일을 script에 연결하여 사용한다. .bxSlider({ mode: 'horizontal' or 'verticla' 가로 슬라이드/세로 슬라이드 speed: 500, 이동속도 pager: false, 페이징 표시 여부 (false시 내가 만든 인디케이터 사용) moveSlides: 1, 슬라이드 이동시 갯수 설정 slideWidth: 180, 슬라이드 마다 너비 설정 (px) minSlides: 1, 최소 노출 개수 maxSlides: 1, 최대 노출 개수 slideMargin: 10, 슬라이드간의 간격 auto: true, 자동으로 흐를지 설정 autoHover: true, 마우스오버시 정지할지 설정 controls: false 이전/다음 버튼 노출 여부(false시 내가 만든 버.. 2023. 4. 16. Jquery 예제 prev / next 버튼을 이용한 슬라이드 메인 배너 이미지 3장을 버튼을 이용하여 슬라이드 시키고 해당 이미지의 인디케이터가 활성화 되도록 만들기 기본 구조 => 메인 배너 영역 => prev next 버튼 이미지 => 인디케이터 영역 => 활성화 이미지 => 비활성화 이미지 let bunNum = 0 $('.next').click(function(){ if(bunNum >= 3) { return false } bunNum ++ // next 버튼을 클릭했을때 만약 bunNum의 값이 3보다 크거나 같다면 아무것도 실행 하지 않음. // 아니라면 bunNum의 값을 하나씩 더해줄것이다. main_w = $('#main').width() $('#main ul').animate({ left: -main_w * bunNum // lefe값을 -가로값.. 2023. 4. 16. Jquery 예제 setinterval 자동 슬라이드 메인 배너 이미지 3장을 자동 슬라이드 -ul 내부에 이미지 요소 3장을 나란히 배치해 둔 상태 setinterval(function(){함수실행문},시간) => 자동으로 함수를 반복 실행 setinterval(function(){ const left1 = $('ul').css('left') // 슬라이드 하려는 요소의 left 값을 저장 if( parseInt(left1) == -1672 ) { // 슬라이드 요소의 left값을 정수로 변환 후 슬라이드 3개 요소를 합친 크기와 비교 $('ul').animate({left:0},'slow') // 슬라이드가 3장이 지나가면 left값을 0으로 주어 처음 상태로 되돌림 } else { $('ul').animate({ left: '-=836px' },'sl.. 2023. 4. 16. Jquery 기본 속성 문서의 시작 - jquery가 본문 내용을 먼저 읽고 실행 할 수 있도록 작성해주어야 하는 함수 $(document).ready(function(){ => 이 안에 모두 작성 }) => 아래처럼 간략하게 사용 가능 $(function(){ }) 기본 작성 방법 - css 사용법과 비슷하게 id, class, 태크 요소를 선택하여 사용할 수 있다. //요소를 지정하여 css 속성 변경하기 $('h1').css('color', 'orange') $('p').css({ 'border': '1px solid red', 'width': '100px' }) // nth-child 요소 지정 $('ul li:first-child') 첫번째 자식 요소 선택 $('ul li:last-child') 마지막 자식 요소 선택.. 2023. 4. 16. 이전 1 다음
