Implement the slideshow focus map plug-in based on jquery and the jquery focus play plug-in

Implement the slideshow focus map plug-in based on jquery and the jquery focus play plug-in

The Code may not be the best.

 /** * 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></li>    <li></li>    <li></li>    <li></li>   </ul>   <ul class="tab">    <li></li>    <li></li>    <li></li>    <li></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 files can be DIY as needed, but the structure in html. slider should be the same.

Run:
$ ('. Slider'). slider ({auto: true, interval: 2000 });

Improved js structure:

/** * 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);

The above is all the content of this article. I hope it will be helpful for you to learn jqueryt program design.

Articles you may be interested in:

• Implement image carousel effect (focus chart) based on JQuery)
• 12 classic models-jquery image carousel plug-ins-required for front-end development
• Implementation of jQuery image carousel
• Special effects of left and right carousel Images Written by jquery
• Native js and jquery achieve image rotation fade-in and fade-out
• Jquery code for image carousel (1)
• JQuery focus graph carousel special effect code sharing (3 models)
• JQuery, right-side tab, focus image, carousel effect, code sharing
• JQuery plug-in for playback of focused images with dots
• Implement image carousel effect (focus chart) based on JQuery)