jQuery_jquery로 구현된 이미지 그룹화 전환 초점 이미지 플러그인

jQuery 기반 이미지 전환 포커스 맵 플러그인입니다. 이 jQuery 포커스 맵 플러그인의 특징은 사진을 그룹으로 전환할 수 있다는 것입니다. 즉, 여러 사진을 한 번에 전환할 수 있다는 의미입니다. 다른 포커스 맵 플러그인을 사용하면 비용을 절약할 수 있습니다. 공간이 많을수록 사용자에게 더 많은 사진을 표시할 수 있어 매우 실용적입니다.

구현 코드.

html 코드:

코드 복사 코드는 다음과 같습니다.

 

       

            上一组下一组

       

           

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

           

       

   

js代码：

复主代码 代码如下:

$(함수 () {
                var $number = Math.ceil($('.scroll ul li').length / 4) //스크롤 화면 수 가져오기
               var margin = 10 //이미지 간격 설정
                var $w = $('.scroll li').width() // 화면 이미지의 너비
                var $width = $w * $number * 2 //ul 너비 설정
            var pre = $('.device .pre');
                var next = $('.device .next');
If ($number == 1) { pre.hide(); next.hide() }
                 $('.scroll ul').width($width);
            var num = 0;
              기능 자동 스크롤() {
                  숫자 ;
If ($number == 1) { return false }
If (num == $number) {
                   숫자 = 0;
                }
              var 거리 = -2 * $w * num;
                      $('.scroll ul').stop().animate({ 왼쪽: 거리 });
            }
            var scrollChange = setInterval(autoscroll, 8000);
//마우스를 가리키고 스크롤을 일시 중지하세요
                 $(".scroll ul,.pre,.next").mouseover(function () {
                    $('.scroll ul').stop()
Clearinterval(스크롤변경)
            });
// 마우스가 멀어지고 롤링이 계속됩니다
                 $('.scroll ul,.pre,.next').mouseout(function () {
                scrollChange = setInterval(autoscroll, 8000);
            });
​​​​​​ //다음 그룹
               next.click(function () {
                  숫자 ;
If (num >= $number) { num = 0 }
              var leftdis = -2 * $w * num;
>             });
//이전 그룹
                 pre.click(function () {
                숫자--;
If (num               var rightdis = -2 * $w * num;
                              $('.scroll ul').stop().animate({ left: rightdis });
            });
        });