Jquery-js tutorial

This article describes in detail the jquery-based carousel focus chart plug-in, which has some reference value. The code is very detailed. Interested friends can refer to the Code directly, it may not be the best. Please try again.

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

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.