基于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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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下使用以下代码连接并测试
2008/04/09 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
简述DNS进行域名解析的过程
2013/12/02 面试题
linux面试题参考答案(1)
2016/01/22 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
青年文明号口号
2014/06/17 职场文书
拆迁委托协议书
2014/09/15 职场文书
社区端午节活动总结
2015/02/11 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
MySQL transaction事务安全示例讲解
2022/06/21 MySQL