집 > 기사 > 웹 프론트엔드 > jQuery 포커스 맵 가로 스크롤 구현 방법

jQuery 포커스 맵 가로 스크롤 구현 방법

php中世界最好的语言원래의: 2018-04-25 10:41:281909검색

이번에는 jQuery 포커스 맵의 가로 스크롤 구현 방법을 알려드리겠습니다. jQuery 포커스 맵의 가로 스크롤에 대한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

jQuery 포커스 맵은 왼쪽과 오른쪽으로 스크롤하고, 왼쪽과 오른쪽 버튼이 있고, 썸네일이 있고, 자동 캐러셀을 지원하는 전체 화면 포커스 맵 코드입니다.

작업 렌더링:

팁: 브라우저가 정상적으로 실행되지 않으면 탐색 모드를 전환해 보세요.
공유해 주신 jQuery 전체 화면 초점 이미지 좌우 스크롤 특수 효과 코드는 다음과 같습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>住趣家居网满屏jQuery焦点图</title>
<link href="css/home.css" rel="stylesheet" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/home.js" type="text/javascript"></script>
</head>
<body>
<p class="zq_homeView" id="jobs_home_homeView">
 <p class="zq_pictureBox" node-type="pictureBox">
  <p class="zq_pictures" node-type="pictures">
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="厨房收纳整理工具" src="images/5.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/1.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/2.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="清新格子床品" src="images/3.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="特色墙纸壁纸" src="images/4.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="开放式简约现代一居室装修" src="images/5.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="厨房收纳整理工具" src="images/1.jpg" /></a>
  </p>
  <p class=&#39;zq_mask zq_maskLeft&#39; node-type="maskLeft"></p>
  <p class=&#39;zq_mask zq_maskRight&#39; node-type="maskRight"></p>
 </p>
 <p class="zq_imgBox">
  <p class="zq_imgs clearfix">
   <a node-type="smallPic" target="_blank" data-index="1" href="http://www.jb51.net/jiaoben/" class="currentImg"><img alt="百搭落地灯" src="images/1.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="2" href="http://www.jb51.net/jiaoben/"><img alt="清新格子床品" src="images/2.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="3" href="http://www.jb51.net/jiaoben/"><img alt="特色墙纸壁纸" src="images/3.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="4" href="http://www.jb51.net/jiaoben/"><img alt="开放式简约现代一居室装修" src="images/4.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="5" href="http://www.jb51.net/jiaoben/"><img alt="厨房收纳整理工具" src="images/5.jpg" /></a>
  </p>
  <p class="zq_slides">
   <a href="javascript:;" class="zq_slideLeft" action-type="prev"><em> </em></a>
   <a href="javascript:;" class="zq_slideRight" action-type="next"><em> </em></a>
  </p>
 </p>
</p>
<p style="text-align:center;clear:both">
</p>
</body>
</html>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 다른 관련 기사를 주목하시기 바랍니다. PHP 중국어 웹사이트에서!