基于jquery实现轮播焦点图插件

直接上代码,可能不是最好的,欢迎吐槽。

 /**
 * 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程序设计有所帮助。

(0)

相关推荐

  • jQuery插件实现带圆点的焦点图片轮播切换

    这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <base target="_blank" /> <

  • jquery实现焦点轮播效果

    HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/lunbo.css" rel="external nofollow" >

  • 轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片轮播(焦点图)插件</title> <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css

  • jQuery右侧选项卡焦点图片轮播特效代码分享

    本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码.分享给大家供大家参考.具体如下: jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击. 运行效果图: ----------------------查看效果-源码下载---------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.  为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下 <!DOCTYPE html PUBLIC "-

  • 基于JQuery的实现图片轮播效果(焦点图)

    完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu

  • jQuery焦点图轮播特效代码分享(3款)

    本文实例讲述了jQuery焦点图轮播特效代码.分享给大家供大家参考.具体如下: jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码,是一段拥有三种不同风格和效果的焦点图轮播代码,其中有两款最有意思,一款是在将焦点图图片分成了四块,每个图片都连接到不同的地址,并且还拥有鼠标悬浮内图时,其它图片都变暗了的效果,另外一款是,带有带缩略图和文字描述效果的焦点图轮播代码. 运行效果图: ----------------------查看效果 源码下载---------------------

  • jQuery焦点图轮播插件KinSlideshow用法分析

    本文实例讲述了jQuery焦点图轮播插件KinSlideshow用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • 基于JQuery实现图片轮播效果(焦点图)

    自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize. 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改. 效果图如下: Html代码如下: <html> <head> <meta charset="utf-8"> <title&

  • jQuery焦点图轮播效果实现方法

    本文实例讲述了jQuery焦点图轮播效果实现方法.分享给大家供大家参考,具体如下: 前面一篇<JS实现焦点图轮播效果的方法详解>详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧. 核心代码如下: $(function(){ var $next=$(".right"); var $prev=$(".left"); var $list_num=$(".list-num a"); var $banner=$(

  • 基于jquery实现轮播焦点图插件

    直接上代码,可能不是最好的,欢迎吐槽. /** * 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.f

  • jQuery的图片滑块焦点图插件整理推荐

    1.jQuery实现的右侧选项卡焦点图片轮播动画 jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击,是一段不错的焦点图切换代码. 在线演示 源码下载 2.jquery实现的网页缩略图大纲可滑动显示动态 query实现的网页缩略图大纲可滑动显示动态特效源码,是一款拥有网页大纲的缩略图显示的代码,点击滑动缩略图即可看到想要的东西,支持鼠标点击.拖动及鼠标滚动切换显示. 在线演示 源码下载 3.纯CSS3实现的自定义美化UL OL列表的3种发

  • 基于jquery实现轮播图效果

    本文实例为大家分享了jquery实现轮播图效果的具体代码,供大家参考,具体内容如下 轮播图左切换原理图 黄色的方框表示的是  slides ,而  slide 表示的是所有轮播图的父亲,每个灰色的方框表示的是每一个轮播图. <div id="slides"> <div id="slide"> <div></div> <div></div> <div></div> <

  • 基于jquery实现轮播特效

    轮播是学习jquery开始的第二个实现的动效,也是学习时间最久的一个.在实现轮播的过程中总是会遇到各种各样的问题,请教过很多人,也多次问过度娘.今天,也不敢果敢的说,可以马上写好一个轮播. 希望是通过随笔的方式,记录下一些思维过程. 首先是html结构,一个简单的轮播,单张图片无缝轮播,主要分为三大层:div>ul>li,li里面的img图片. 其次,css样式:div固定住宽高,overflow:hidden:ul的宽度建议是动态获取(下一步会讲是怎么获取):关于li我习惯使用浮动,让他们依

  • jQuery实现的图片分组切换焦点图插件

    这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实用. 实现的代码. html代码: 复制代码 代码如下: <div class="device">         <h2>             <a href="javascript:;" class="pre"&

  • jquery图片轮播特效代码分享

    本文实例讲述了jquery图片轮播特效.分享给大家供大家参考.具体如下: 这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效. 运行效果图:         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片轮播特效代码如下 <!DOCTYPE html> <head> <meta http-equiv=

  • jQuery自适应轮播图插件Swiper用法示例

    本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

随机推荐