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 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
深入理解Node module模块
Mar 26 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 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 中的输出缓冲
2006/12/21 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
Javascript 入门基础学习
2010/03/10 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python字符串格式化
2015/06/15 Python
Python+微信接口实现运维报警
2016/08/27 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
python else语句在循环中的运用详解
2020/07/06 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
运动会方阵解说词
2014/02/12 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
运动会班级口号
2014/06/09 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
行政经理岗位职责
2015/04/15 职场文书
用Python将库打包发布到pypi
2021/04/13 Python