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 相关文章推荐
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
vue v-model动态生成详解
Jun 30 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php之Memcache学习笔记
2013/06/17 PHP
PHP连接access数据库
2015/03/27 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
webpack入门必知必会
2017/01/16 Javascript
React Router基础使用
2017/01/17 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python中最大递归深度值的探讨
2019/03/05 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
华为C++笔试题
2014/08/05 面试题
RealTek面试题
2016/06/28 面试题
2014年计算机专业个人自我评价
2014/01/19 职场文书
《口技》教学反思
2014/02/21 职场文书
人资专员岗位职责
2014/04/04 职场文书
三年级评语大全
2014/04/23 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
2014年党支部工作总结
2014/11/13 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL
Win11开始菜单添加休眠选项
2022/04/19 数码科技