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编程起步(第七课)
Jan 10 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
Vue中computed及watch区别实例解析
Aug 01 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
python实现kMeans算法
2017/12/21 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
设计大赛策划方案
2014/06/13 职场文书
委托书格式
2014/08/01 职场文书
模范教师材料大全
2014/12/16 职场文书
建国大业观后感600字
2015/06/01 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技