jquery怎么实现轮播效果

jquery实现轮播效果的方法：1、通过jquery的hover()绑定鼠标上悬以及离开时的事件处理；2、 通过jquery的bind()方法绑定鼠标点击事件处理前后翻动即可。

本文操作环境：windows7系统、jquery-2.1.4版、DELL G3电脑

jquery怎么实现轮播效果?

Jquery代码实现图片轮播效果

文章写的不好，还请各位高手指教，不废话了，先上张效果图吧看下：

首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。

事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：PRe(), next(), play(), start()开始自动轮播，stop()停止自动轮播。

下篇是一个纯粹的jquery轮播插件， 该插件可以定制各种效果，方便的配置以及可扩展。

下面是整体的代码：

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 = $('.slider-panel').length;
      //将除了第一张图片隐藏  $('.slider-panel:not(:First)').hide();
      //将第一个slider-item设为激活状态  $('.slider-item:first').addClass('slider-item-selected');
      //隐藏向前、向后翻按钮  $('.slider-page').hide();
  //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动  $('.slider-panel, .slider-pre, .slider-next').hover(function() {
       stop();
       $('.slider-page').show();
  }
, function() {
       $('.slider-page').hide();
       start();
  }
    );
  $('.slider-item').hover(function(e) {
       stop();
       var preIndex = $(".slider-item").filter(".slider-item-selected").index();
       currentIndex = $(this).index();
       play(preIndex, currentIndex);
  }
, function() {
       start();
  }
    );
      $('.slider-pre').unbind('click');
  $('.slider-pre').bind('click', function() {
       pre();
  }
    );
      $('.slider-next').unbind('click');
  $('.slider-next').bind('click', 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) {
       $('.slider-panel').eq(preIndex).fadeOut(500)   .parent().children().eq(currentIndex).fadeIn(1000);
       $('.slider-item').removeClass('slider-item-selected');
       $('.slider-item').eq(currentIndex).addClass('slider-item-selected');
  }
  /**   * 开始轮播   */  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>
    

至此一个简单的jquery轮播效果就完成了，当然还有很多需要改进的地方。

推荐学习：《jquery视频教程》

以上就是jquery怎么实现轮播效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！