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对Select的操作大集合(收藏)
Dec 28 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
vue改变循环遍历后的数据实例
Nov 07 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
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
JS Array对象入门分析
2008/10/30 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python post请求实现代码实例
2020/02/28 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Python Merge函数原理及用法解析
2020/09/16 Python
如何用Python绘制3D柱形图
2020/09/16 Python
QA工程师岗位职责
2013/11/20 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
党组织公开承诺书
2014/03/29 职场文书
保健品市场营销方案
2014/03/31 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
就业证明函
2015/06/17 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
python如何读取.mtx文件
2021/04/22 Python
go类型转换及与C的类型转换方式
2021/05/05 Golang
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python