jQuery实现简洁的轮播图效果实例

更新时间：2016年09月07日 12:23:45 作者：onestopweb

这篇文章主要介绍了jQuery实现简洁的轮播图效果,结合实例形式分析了jQuery的事件响应机制与页面元素动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现简洁的轮播图效果。分享给大家供大家参考，具体如下：

HTML：

<div class="ppt">
  <a href="###"><img src="ppt/ppt1.jpg" /></a>
  <a href="###" style="display:none;"><img src="ppt/ppt2.jpg" /></a>
  <a href="###" style="display:none;"><img src="ppt/ppt3.jpg" /></a>
  <a href="###" style="display:none;"><img src="ppt/ppt4.jpg" /></a>
  <div class="pptNum">
    <span class="normal">4</span>
    <span class="normal">3</span>
    <span class="normal">2</span>
    <span class="cur">1</span>
  </div>
</div>

css：

/*幻灯片*/
.ppt{ width:270px; height:330px; border:1px solid #ccc; position:relative;}
.ppt img{ position: absolute; top:10px; left:7px; width:255px; height:310px; overflow:hidden;}
.pptNum{ position: absolute; height: 13px; line-height: 14px; bottom:12px; right: 10px; }
.pptNum span{ font-size: 12px; font-weight: 400; color: #FFF; float: right; display: block; width: 24px; text-align: center; background: #000; border-left: solid 1px #FFF; cursor: pointer; }
.pptNum .normal{ color: #FFF; background: #000; filter: Alpha(opacity=50); opacity: .5; }
.pptNum .cur{ background: #ce0609; color: #FFF; }

js：

; (function ($) {
  $.fn.extend({
    "ppting": function (t) {
      var num = 4; //共多少张要轮播的
      var $this = $(this), i = 0, $pics = $('.ppt'), autoChange = function () {
        var $currentPic = $pics.find('a:eq(' + (i + 1 === num ? 0 : i + 1) + ')');
        $currentPic.css({
          display: 'block'
        }).siblings('a').css({
          display: 'none'
        });
        $pics.find('.pptNum>span:contains(' + (i + 2 > num ? num - i : i + 2) + ')').attr('class', 'cur').siblings('span').attr('class', 'normal');
        i = i + 1 === num ? 0 : i + 1;
      }, st = setInterval(autoChange, t || 2000);
      $this.hover(function () {
        clearInterval(st);
      }, function () { st = setInterval(autoChange, t || 2000) });
      $pics.find('.pptNum>span').click(function () {
        i = parseInt($(this).text(), 10) - 2;
        autoChange();
      });
    }
  });
}(jQuery));
$('.ppt').ppting(1000);

调用JQ：

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/ppt.js"></script>

效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

js实现表格筛选功能
本文主要介绍了js实现表格筛选功能的代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
jquery缓动swing liner控制动画过程不同时刻的速度
一个用来控制动画过程的速度的参数，这就是缓动(easing)，它确定了动画过程不同时刻的速度
2014-05-05
jquery 实现密码框的显示与隐藏示例代码
密码框的显示隐藏有多种实现方法，在将为大家介绍下如何使用jquery实现，感兴趣的朋友可以参考下
2013-09-09
jQuery+ajax+asp.net获取Json值的方法
这篇文章主要介绍了jQuery+ajax+asp.net获取Json值的方法,涉及jQuery的ajax技术与asp.net后台交互的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
Jquery结合HTML5实现文件上传
本文给大家介绍的是利用Jquery使用HTML5的FormData属性实现对文件的上传的方法和实例，非常的实用，有需要的小伙伴可以参考下。
2015-06-06
jQuery控制文本框只能输入数字和字母及使用方法
这篇文章主要介绍了jQuery控制文本框只能输入数字和字母及使用方法的相关资料，非常不错而且实用性也很高,需要的朋友可以参考下
2016-05-05
jQuery实现Twitter的自动文字补齐特效
本文介绍了一款jQuery实现的文字自动补全特效的插件，该插件可以结合本地数据进行一些操作。推荐关注一下H5的几种数据存储的方式（localstorage与sessionstorage、IndexedDB、离线缓存manifest文件）
2014-11-11
jQuery 工具函数学习资料
jquery为我们提供了操作数组和对象的工具函数，方便和简化了我们对它们的操作。今天我们就进入jQuery的工具函数的复习。
2010-04-04
jQuery中each方法的使用详解
each() 方法规定为每个匹配元素规定运行的函数。这篇文章主要给大家介绍jQuery中each方法的使用详解，需要的朋友参考下吧
2018-03-03
jquery中ajax学习笔记3
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
2011-10-10