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


Posted in Javascript onSeptember 07, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
js窗口震动小程序分享
Nov 28 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 #Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 #Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 #Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 #Javascript
详解AngularJS中ng-src指令的使用
Sep 07 #Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 #Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 #Javascript
You might like
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
道路施工安全责任书
2014/07/24 职场文书
银行员工考核评语
2014/12/31 职场文书