基于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学习笔记(一) js基本语法
Oct 25 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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验证码(支持中文)
2007/02/14 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python实现泊松图像融合
2018/07/26 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
音乐兴趣小组活动总结
2014/07/07 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
毕业生入职感言
2015/07/31 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL