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

前端技术 2023/09/07 JavaScript

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

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

本文地址：https://www.stayed.cn/item/19479

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案