基于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 相关文章推荐
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
vue cli安装使用less的教程详解
Jul 12 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
如何开始收听短波广播
2021/03/01 无线电
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
微信支付开发交易通知实例
2016/07/12 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python发布模块的步骤分享
2014/02/21 Python
python文件操作相关知识点总结整理
2016/02/22 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
学生思想表现的评语
2014/01/30 职场文书
开业庆典策划方案
2014/02/18 职场文书
教师求职自荐信
2014/03/09 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
超市客服工作职责
2014/06/11 职场文书
在校实习生求职信
2014/06/18 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
旅游安全责任协议书
2016/03/22 职场文书
python获取对象信息的实例详解
2021/07/07 Python