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 应用技巧集合[推荐]
Aug 30 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
js中typeof的用法汇总
Dec 12 Javascript
js点击选择文本的方法
Feb 09 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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 计划任务 检测用户连接状态
2012/03/29 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
CI框架附属类用法分析
2018/12/26 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python内存读写操作示例
2018/07/18 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Python更换pip源方法过程解析
2020/05/19 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
求职自荐信的格式
2014/04/07 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
中职生求职信
2014/07/01 职场文书
挂职个人工作总结
2015/03/05 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
晚会开场白和结束语
2015/05/29 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android