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判断数组是否包含指定元素的方法
Jul 01 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
js实现表格筛选功能
Jan 18 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
JS面试题中深拷贝的实现讲解
May 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
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
简单实现js浮动框
2016/12/13 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
ElementUI radio组件选中小改造
2019/08/12 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
python结合API实现即时天气信息
2016/01/19 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
对python 调用类属性的方法详解
2019/07/02 Python
postman传递当前时间戳实例详解
2019/09/14 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
python中sys模块是做什么用的
2020/08/16 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
基于Python实现天天酷跑功能
2021/01/06 Python
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
负责培养人意见
2015/06/05 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书