基于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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
用js实现的抽象CSS圆角效果!!
May 03 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
Javascript中神奇的this
Jan 20 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 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
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
Python descriptor(描述符)的实现
2020/11/15 Python
详解anaconda安装步骤
2020/11/23 Python
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
创新比赛获奖感言
2014/02/13 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
少先队活动总结
2014/08/29 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
Python Socket编程详解
2021/04/25 Python
mysql 索引合并的使用
2021/08/30 MySQL
Python循环之while无限迭代
2022/04/30 Python