JQuery 호버 제어 이미지 캐러셀 - 간단한 code_jquery

jquery로 구현된 마우스 오버 이미지의 자동 캐러셀 효과입니다. 이미지 위에 마우스를 올리면 이미지가 계속 반복 재생되며 속도가 매우 빠르고 효과가 매우 현실적입니다. 무술 영화를 재생하는 것처럼 jquery 구현을 사용하여 아래 편집기는 jq 호버 제어 이미지 캐러셀을 분석합니다. 측면의 렌더링을 참조하세요.

온라인 미리보기   소스코드 다운로드

구체적인 구현 코드는 다음과 같습니다.

<!-- 轮播广告 -->
 <div id="banner_tabs" class="flexslider">
 <ul class="slides">
  <li>
  <a title="" target="_blank" href="#">
   <img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png">
  </a>
  </li>
  <li>
  <a title="" href="#">
   <img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png">
  </a>
  </li>
  <li>
  <a title="" href="#">
   <img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png">
  </a>
  </li>
 </ul>
 <ul class="flex-direction-nav">
  <li><a class="flex-prev" href="javascript:;">Previous</a></li>
  <li><a class="flex-next" href="javascript:;">Next</a></li>
 </ul>
 <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
  <li><a>1</a></li>
  <li><a>2</a></li>
  <li><a>2</a></li>
 </ol>
 </div>
 <script src="js/jquery-1.10.2.min.js"></script>
 <script src="js/slider.js"></script>
 <script type="text/javascript">
 $(function () {
  var bannerSlider = new Slider($('#banner_tabs'), {
  time: 5000,
  delay: 400,
  event: 'hover',
  auto: true,
  mode: 'fade',
  controller: $('#bannerCtrl'),
  activeControllerCls: 'active'
  });
  $('#banner_tabs .flex-prev').click(function () {
  bannerSlider.prev()
  });
  $('#banner_tabs .flex-next').click(function () {
  bannerSlider.next()
  });
 })
 </script>

CSS 코드:

.flexslider {
  margin: 0px auto 20px;
  position: relative;
  width: 100%;
  height: 482px;
  overflow: hidden;
  zoom: 1;
 }
  .flexslider .slides li {
  width: 100%;
  height: 100%;
  }
 .flex-direction-nav a {
  width: 70px;
  height: 70px;
  line-height: 99em;
  overflow: hidden;
  margin: -35px 0 0;
  display: block;
  background: url(images/ad_ctr.png) no-repeat;
  position: absolute;
  top: 50%;
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all .3s ease;
  border-radius: 35px;
 }
 .flex-direction-nav .flex-next {
  background-position: 0 -70px;
  right: 0;
 }
 .flex-direction-nav .flex-prev {
  left: 0;
 }
 .flexslider:hover .flex-next {
  opacity: 0.8;
  filter: alpha(opacity=25);
 }
 .flexslider:hover .flex-prev {
  opacity: 0.8;
  filter: alpha(opacity=25);
 }
  .flexslider:hover .flex-next:hover,
  .flexslider:hover .flex-prev:hover {
  opacity: 1;
  filter: alpha(opacity=50);
  }
 .flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: 10px;
  text-align: center;
 }
  .flex-control-nav li {
  margin: 0 2px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  }
 .flex-control-paging li a {
  background: url(images/dot.png) no-repeat 0 -16px;
  display: block;
  height: 16px;
  overflow: hidden;
  text-indent: -99em;
  width: 16px;
  cursor: pointer;
 }
  .flex-control-paging li a.flex-active,
  .flex-control-paging li.active a {
  background-position: 0 0;
  }
 .flexslider .slides a img {
  width: 100%;
  height: 482px;
  display: block;
 }

위 코드는 jq를 사용하여 호버 제어 이미지 캐러셀을 구현한 이 기사의 내용입니다.