基于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和ajax的关系详细介绍
Nov 29 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
js实现简单选项卡功能
Mar 23 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Django中的ajax请求
2018/10/19 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
建筑班组长岗位职责
2014/01/02 职场文书
团代会邀请函
2015/02/02 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL