Home > Web Front-end > JS Tutorial > body text

How to achieve carousel effect with jquery

藏色散人
Release: 2021-12-01 11:16:14
Original
3751 people have browsed it

How jquery implements the carousel effect: 1. Bind the mouse up and leave event processing through jquery's hover() method; 2. Bind the mouse click event processing before and after through jquery's bind() method Just flip it.

How to achieve carousel effect with jquery

The operating environment of this article: windows7 system, jquery-2.1.4 version, DELL G3 computer

How to achieve the carousel effect with jquery ?

Jquery code to achieve image carousel effect

The article is not well written, and I would like to ask experts for advice. Without further ado, let’s take a look at the renderings first:

The first is the initialization part: hide all pictures except the first carousel picture, and hide the forward and backward buttons so that the first index button is activated .

Event part: bind the mouse up and leave event processing through jquery's hover() method, jquery's bind() method binds the mouse click event processing for forward, backward flipping, and carousel control: pre(), next(), play(), start() start automatic rotation, and stop() stops automatic rotation.

The next article is a pure jquery carousel plug-in, which can customize various effects, convenient configuration and extensibility.

The following is the overall code:

index.html
[html] view plaincopy
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jquery轮播效果图 </title> 
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script> 
<style type="text/css"> 
 * { 
 padding: 0px; 
 margin: 0px; 
 } 
 a { 
 text-decoration: none; 
 } 
 ul { 
 list-style: outside none none; 
 } 
 .slider, .slider-panel img, .slider-extra { 
 width: 650px; 
 height: 413px; 
 } 
 .slider { 
 text-align: center; 
 margin: 30px auto; 
 position: relative; 
 } 
 .slider-panel, .slider-nav, .slider-pre, .slider-next { 
 position: absolute; 
 z-index: 8; 
 } 
 .slider-panel { 
 position: absolute; 
 } 
 .slider-panel img { 
 border: none; 
 } 
 .slider-extra { 
 position: relative; 
 } 
 .slider-nav { 
 margin-left: -51px; 
 position: absolute; 
 left: 50%; 
 bottom: 4px; 
 } 
 .slider-nav li { 
 background: #3e3e3e; 
 border-radius: 50%; 
 color: #fff; 
 cursor: pointer; 
 margin: 0 2px; 
 overflow: hidden; 
 text-align: center; 
 display: inline-block; 
 height: 18px; 
 line-height: 18px; 
 width: 18px; 
 } 
 .slider-nav .slider-item-selected { 
 background: blue; 
 } 
 .slider-page a{ 
 background: rgba(0, 0, 0, 0.2); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 
 color: #fff; 
 text-align: center; 
 display: block; 
 font-family: "simsun"; 
 font-size: 22px; 
 width: 28px; 
 height: 62px; 
 line-height: 62px; 
 margin-top: -31px; 
 position: absolute; 
 top: 50%; 
 } 
 .slider-page a:HOVER { 
 background: rgba(0, 0, 0, 0.4); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
 } 
 .slider-next { 
 left: 100%; 
 margin-left: -28px; 
 } 
</style> 
<script type="text/javascript"> 
 $(document).ready(function() { 
 var length, 
  currentIndex = 0, 
  interval, 
  hasStarted = false, //是否已经开始轮播 
  t = 3000; //轮播时间间隔 
 length = $(&#39;.slider-panel&#39;).length; 
 //将除了第一张图片隐藏 
 $(&#39;.slider-panel:not(:first)&#39;).hide(); 
 //将第一个slider-item设为激活状态 
 $(&#39;.slider-item:first&#39;).addClass(&#39;slider-item-selected&#39;); 
 //隐藏向前、向后翻按钮 
 $(&#39;.slider-page&#39;).hide(); 
 //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动 
 $(&#39;.slider-panel, .slider-pre, .slider-next&#39;).hover(function() { 
  stop(); 
  $(&#39;.slider-page&#39;).show(); 
 }, function() { 
  $(&#39;.slider-page&#39;).hide(); 
  start(); 
 }); 
 $(&#39;.slider-item&#39;).hover(function(e) { 
  stop(); 
  var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
  currentIndex = $(this).index(); 
  play(preIndex, currentIndex); 
 }, function() { 
  start(); 
 }); 
 $(&#39;.slider-pre&#39;).unbind(&#39;click&#39;); 
 $(&#39;.slider-pre&#39;).bind(&#39;click&#39;, function() { 
  pre(); 
 }); 
 $(&#39;.slider-next&#39;).unbind(&#39;click&#39;); 
 $(&#39;.slider-next&#39;).bind(&#39;click&#39;, function() { 
  next(); 
 }); 
 /** 
  * 向前翻页 
  */ 
 function pre() { 
  var preIndex = currentIndex; 
  currentIndex = (--currentIndex + length) % length; 
  play(preIndex, currentIndex); 
 } 
 /** 
  * 向后翻页 
  */ 
 function next() { 
  var preIndex = currentIndex; 
  currentIndex = ++currentIndex % length; 
  play(preIndex, currentIndex); 
 } 
 /** 
  * 从preIndex页翻到currentIndex页 
  * preIndex 整数,翻页的起始页 
  * currentIndex 整数,翻到的那页 
  */ 
 function play(preIndex, currentIndex) { 
  $(&#39;.slider-panel&#39;).eq(preIndex).fadeOut(500) 
  .parent().children().eq(currentIndex).fadeIn(1000); 
  $(&#39;.slider-item&#39;).removeClass(&#39;slider-item-selected&#39;); 
  $(&#39;.slider-item&#39;).eq(currentIndex).addClass(&#39;slider-item-selected&#39;); 
 } 
 /** 
  * 开始轮播 
  */ 
 function start() { 
  if(!hasStarted) { 
  hasStarted = true; 
  interval = setInterval(next, t); 
  } 
 } 
 /** 
  * 停止轮播 
  */ 
 function stop() { 
  clearInterval(interval); 
  hasStarted = false; 
 } 
 //开始轮播 
 start(); 
 }); 
</script> 
</head> 
<body> 
 <div class="slider"> 
 <ul class="slider-main"> 
  <li class="slider-panel"> 
  <a href="https://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/1.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="https://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/2.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="https://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/3.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="https://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/4.jpg"></a> 
  </li> 
 </ul> 
 <div class="slider-extra"> 
  <ul class="slider-nav"> 
  <li class="slider-item">1</li> 
  <li class="slider-item">2</li> 
  <li class="slider-item">3</li> 
  <li class="slider-item">4</li> 
  </ul> 
  <div class="slider-page"> 
  <a class="slider-pre" href="javascript:;;"><</a> 
  <a class="slider-next" href="javascript:;;">></a> 
  </div> 
 </div> 
 </div> 
</body> 
</html>
Copy after login

At this point, a simple jquery carousel effect is completed. Of course, there are still many areas that need improvement.

Recommended learning: "jquery video tutorial"

The above is the detailed content of How to achieve carousel effect with jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!