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 相关文章推荐
JS制作简单的三级联动
Mar 18 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
node.js如何操作MySQL数据库
Oct 29 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
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 模拟$_PUT实现代码
2010/03/15 PHP
php字符串截取的简单方法
2013/07/04 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python实现加密的方式总结
2020/01/19 Python
如何理解python中数字列表
2020/05/29 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
家具厂厂长岗位职责
2014/01/01 职场文书
检察官就职演讲稿
2014/01/13 职场文书
户外宣传策划方案
2014/05/25 职场文书
党支部活动策划方案
2014/08/18 职场文书
财务会计岗位职责
2015/02/03 职场文书
学生会任命书范本
2015/09/21 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python