도트 이미지 캐러셀의 jQuery 구현 공유 예

페이지 내 지정된 위치에 구현된 사진은 자동으로 좌우로 전환되어 효과가 표시됩니다. 사진 왼쪽 하단의 라벨(또는 중앙의 작은 점)을 클릭하면 해당 사진으로 전환됩니다. 다음으로 이 글을 통해 jQuery를 사용하여 도트 이미지 캐러셀 효과를 구현하는 예제 코드를 공유하겠습니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

사진 회전식 효과:

사진은 페이지의 지정된 위치에서 자동으로 왼쪽과 오른쪽으로 전환되며 효과는 원활합니다.

사진 왼쪽 하단에 있는 라벨(또는 작은 점)을 클릭하세요. 중간) 해당 사진으로 전환하려면;

라벨을 전환하려면 사진의 왼쪽과 오른쪽을 클릭하세요.

전체 아이디어:

------ -------------------------- ----------- ------------- -----------

자동 캐러셀: 같은 높이의 큰 p를 배치합니다. 디스플레이 프레임에 그림 자료를 배치하기 위한 디스플레이 프레임으로 jquery를 통해 그림 자료를 큰 p에 넣습니다. animate() 메서드는 디스플레이 프레임의 절대 위치를 기준으로 큰 p의 왼쪽 값과 변경 시간을 변경하여 자동 재생 효과를 얻기 위해 setInterval() 메소드를 사용하여 타이머를 설정합니다. 원활한 연속 재생의 초점은 첫 번째 사진이 마지막 사진과 동일해야 하므로 재생 후 마지막 그림, 큰 p 상자의 왼쪽을 초기값으로 설정한 다음 그림과 동일한 인덱스를 가진 변수를 1(두 번째 그림)로 설정하여 원활한 연속 슬라이딩 효과를 얻습니다.

---- ------------------------ ------------- --------------------------

라벨을 클릭하면 해당 사진으로 전환됩니다. 사진의 li 태그 전환을 클릭하고 추가하세요. 마우스 클릭 이벤트가 있으면 먼저 삭제하세요. $(this).Index()를 사용하여 현재 클릭된 사진의 일련번호(index)를 가져오고 빅 p의 왼쪽 값을 해당 값으로 설정합니다. 현재 사진 위치의 경우 동시에 현재 li 태그에 어두운 색상의 확실한 효과를 설정하고 다른 li 태그에 대한 초기 효과를 설정하는 것을 잊지 마십시오. 마우스를 클릭한 후 일정 시간 동안 다른 작업을 수행하면 자동 재생 타이머가 복원됩니다.

------------ ------------ ------------ ---------

왼쪽 또는 오른쪽 레이블을 클릭하면 이전/다음 그림으로 전환됩니다. 이 레이블은

--------------------- ------ ------------------------------- --

코드 는 다음과 같이 구현됩니다.

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>  //引入jquery (css代码未贴)
  <script type="text/javascript">
    $(function(){
        var rcd=0;       //代表图片和li标签编号的全局变量
//       滑动函数
        function slide(){   
          rcd++;
          if(rcd==4){    //右滑倒最后一张时,将图片设定为第一张的位置,即将滑动的图片设定为第二张(rcd=1)
            $(&#39;#sld&#39;).css({&#39;left&#39;:&#39;0&#39;});
            rcd=1;
          };
          var dis = rcd*(-1210)+&#39;px&#39;;    //这里的1210是每张图片的宽度,rcd和dis的关系就是编号和p left值的关系
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},1000)  //设定left
          if (rcd==3) {    //当切换到最后一张时(一共4张图片),将左下方的标签样式也改成与第一张一样的
            $(&#39;#fix ul li&#39;).eq(0).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }else{
            $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})      //不是最后一张那么就正常执行
          }
        }
//       设定定时器,开始轮播
        var timer = setInterval(slide,2000);
        var st;    //声明倒计时函数变量名
//       绑定li鼠标点击事件
        $(&#39;#fix ul li&#39;).click(function(){
          clearInterval(timer);     //清除定时器(同下一行)
          clearTimeout(st);
          var rcd = $(this).index();   //获得点击的li的编号
          var dis =rcd*(-1210)+&#39;px&#39;;   //获得该编号对应的p的left值
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},500)  //开始运动
          $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})     //设置当前li样式,其他li变为初始值
          st = setTimeout(function(){   //设置定时器,若3秒内没有鼠标点击操作,就重新设置轮播定时器
            timer = setInterval(slide,2000);
          },3000)
        }); 
//       左图标点击事件
        $(&#39;#fix .lt&#39;).click(function(){
          clearInterval(timer);
          clearTimeout(st);
          rcd--;     //点击前的编号-1
          if(rcd==-1){  //如果rcd减后值为-1,那么将p的left设置为最后一张图显示的值,并将rcd设置为倒数第二张的编号
            $(&#39;#sld&#39;).css({&#39;left&#39;:&#39;-3630px&#39;});
            rcd=2;
          };
          var dis = rcd*(-1210)+&#39;px&#39;;
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},1000)  //运动
          if (rcd==3) {     //与前面相同
            $(&#39;#fix ul li&#39;).eq(0).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }else{
            $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }
          st = setTimeout(function(){
            timer = setInterval(slide,2000);
          },3000)
        })
//       右图标点击事件
        $(&#39;#fix .rt&#39;).click(function(){
          clearInterval(timer);
          clearTimeout(st);
          slide();     //右图标点击一次与滑动函数一致
          st = setTimeout(function(){
            timer = setInterval(slide,2000);
          },3000)
        })
//       给#fix p加鼠标移入事件
        $(&#39;#fix&#39;).mouseenter(function(){     
          $(&#39;#fix a&#39;).css({&#39;display&#39;:&#39;block&#39;});  //鼠标移入时,向左向右图标显示
        })
//       给#fix p加鼠标移出事件
        $(&#39;#fix&#39;).mouseleave(function(){
          $(&#39;#fix a&#39;).css({&#39;display&#39;:&#39;none&#39;});   //鼠标移出时,向左向右图标隐藏
        })
    })
  </script>
  </head>
  <body>
    <p id="fix">
      <p id="sld">
        <img  src="轮播图/ph1.png"/ alt="도트 이미지 캐러셀의 jQuery 구현 공유 예" >
        <img  src="轮播图/ph2.jpg"/ alt="도트 이미지 캐러셀의 jQuery 구현 공유 예" >
        <img  src="轮播图/ph3.jpg"/ alt="도트 이미지 캐러셀의 jQuery 구현 공유 예" >
        <img  src="轮播图/ph1.png"/ alt="도트 이미지 캐러셀의 jQuery 구현 공유 예" >
      </p>
      <ul>
        <li style="opacity: 0.6;">iPhone6</li>
        <li>Mate9</li>
        <li>vivo X9</li>
      </ul>
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="lt"><img  src="轮播图/left.png"/ alt="도트 이미지 캐러셀의 jQuery 구현 공유 예" ></a> //阻止浏览器的默认跳转
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img  src="轮播图/right.png"/ alt="도트 이미지 캐러셀의 jQuery 구현 공유 예" ></a>
    </p>
  </body>

다들 배웠나요? 서둘러서 한번 시도해 보세요.

관련 권장사항:

부트스트랩 이미지 캐러셀 효과 구현 방법

JS를 사용하여 이미지 캐러셀 구현 예

JQuery를 사용하여 이미지 캐러셀 효과 구현

위 내용은 도트 이미지 캐러셀의 jQuery 구현 공유 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!