基于jquery实现轮播焦点图插件


Posted in Javascript onMarch 31, 2016

直接上代码,可能不是最好的,欢迎吐槽。

/**
 * Created by Steven on 2015/07/10/0010.
 * @email zhuttymore@126.com
 */
 
 (function ($) {
 
  $.fn.slider = function (opt) {
   opt = $.extend({
    speed:'fast',
    auto: false,
    interval: 1000
   }, opt);
 
   var _this = this;
   var index = 0;
   _this.find('.window li').width(_this.width());
 
   var animate = function(index){
    var win = _this.find('.window');
    var offset = win.parent().width();
    win.animate({'marginLeft': -offset * index}, opt.speed);
    _this.find('.tab li').removeClass('select');
    _this.find('.tab li').eq(index).addClass('select');
   };
 
   _this.find('.tab li').mouseover(function () {
    index = parseInt($(this).index());
    animate(index);
 
   });
 
   _this.find('.btn li:first-child').click(function(){
    --index;
    if(index < 0){
     index = _this.find('.window li').length - 1;
    }
    animate(index);
   });
 
   _this.find('.btn li:last-child').click(function(){
    ++index;
    if(index >= _this.find('.window li').length){
     index = 0;
    }
    animate(index);
   });
 
   if(opt.auto){
    var time = setInterval(function(){
     ++index;
     if(index >= _this.find('.window li').length){
      index = 0;
     }
     animate(index);
    },opt.interval);
   }
 
   return $.each(this,function(index,ele){});
  };
 })(jQuery);

Html

<div class="slider">
   <ul class="btn">
    <li><i class=" icon-caret-left"></i></li>
    <li><i class=" icon-caret-right"></i></li>
   </ul>
   <ul class="window">
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li>
   </ul>
   <ul class="tab">
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591046_561095.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591047_607794.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_591048_865919.jpg" alt=""/></li>
    <li><img src="http://www.sinaimg.cn/dy/slidenews/1_img/2015_28/2841_590990_446978.jpg" alt=""/></li>
   </ul>
  </div>

CSS

.slider {
  height: 440px;
  overflow: hidden;
  position: relative;
 }
 .slider .btn li{
  position: absolute;
  width: 30px;
  height: 50px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-size: 40px;
  top:45%;
 }
 .slider .btn li:first-child {
 
  left:0;
 
 }
 
 .slider .btn li:last-child {
 
  right:0;
 
 }
 
 .slider img {
  width: 100%;
  height: 100%;
 }
 
 .slider .window {
  width: 40000px;
  height: 400px;
  overflow: hidden;
 }
 
 .slider .window li {
  float: left;
  overflow: hidden;
  width: 1200px;
 }
 
 .slider .tab {
  position: absolute;
  z-index: 5;
  width: 880px;
  margin: -40px auto;
  left: 13%;
 }
 
 .slider .tab li {
  float: left;
  width: 200px;
  height: 80px;
  margin-left: 18px;
  cursor: pointer;
 }

Css文件可以根据需求自己DIY, 但html的.slider里面的结构应该是一样。

Run 起来:
$('.slider').slider({auto: true, interval: 2000});

改进js结构:

/**
 * Created by Steven on 2015/07/10/0010.
 * @email zhuttymore@126.com
 */

(function ($) {

 $.fn.extend({
  slider:function (opt) {
   opt = $.extend({
    
   }, opt);
   //Do something here
   
   return $.each(this,function(index,ele){});
  }
 });

})(jQuery);

以上就是本文的全部内容,希望对大家学习jqueryt程序设计有所帮助。

Javascript 相关文章推荐
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
javascript中错误使用var造成undefined
Mar 31 #Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 #Javascript
js表单验证实例讲解
Mar 31 #Javascript
javascript创建cookie、读取cookie
Mar 31 #Javascript
基于javascript实现全屏漂浮广告
Mar 31 #Javascript
JS深度拷贝Object Array实例分析
Mar 31 #Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 #Javascript
You might like
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python字符串格式化输出方法分析
2016/04/13 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python中的协程深入理解
2019/06/10 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
应届本科生推荐信范文
2013/12/25 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
教师研修随笔感言
2014/01/23 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
学习经验交流会策划书
2015/11/02 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
Golang 实现WebSockets
2022/04/24 Golang