体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师为啥点了后图片不切换

来源：3-4 幻灯片的js--初始化、切换和绑定事件

慕容5109188

2019-11-25 21:26:36

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>幻灯片</title>
   <link rel="stylesheet" href="../CSS/base.css">
   <link rel="stylesheet" href="../CSS/commen.css">
   <style>
       .slider{margin-left: 280px;
           position: relative;
           overflow: hidden;
           width: 728px;
           height: 504px;
       }
       .slider-indicator-wrap{
           position: absolute;
           bottom: 24px;
           left: 50%;
           margin-left: -36px;
       }
       .slider-indicator{
           width: 8px;
           height: 8px;
           background-color: #313a43;
           border-radius: 50%;
           margin-right: 12px;
           cursor: pointer;
       }
       .slider-indicator-active{
           position: relative;
           top: -2px;
           background-color: #f7f8f9;
           border: 2px solid #858b92;
       }
       .slider-control{
           display: none;
           position: absolute;
           top: 50%;
           margin-top: -31px;
           width: 28px;
           height: 62px;
           line-height: 62px;
           background-color: #000;
           opacity: 0.8;
           filter: alpha(opacity = 80);
           color: #fff;
           font-size: 22px;
           font-family: SimSun;
           text-align: center;
       }
       .slider-control-left{
           left: 0;
       }
       .slider-control-right{
           right: 0;
       }
       .slider-fade .slider-item{
           display: none;
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
       }
   </style>
</head>
<body>
   <div id="focus-slider" class="slider">
       <div class="slider-container">
           <div class="slider-item">
               <a href="###" target="_blank"><img src="../Img/focus-slider/1.png" alt=""></a>
           </div>
           <div class="slider-item">
               <a href="###" target="_blank"><img src="../Img/focus-slider/2.png" alt=""></a>
           </div>
           <div class="slider-item">
               <a href="###" target="_blank"><img src="../Img/focus-slider/3.png" alt=""></a>
           </div>
           <div class="slider-item">
               <a href="###" target="_blank"><img src="../Img/focus-slider/4.png" alt=""></a>
           </div>
       </div>
       <ol class="slider-indicator-wrap">
           <li class="slider-indicator text-hide fl">1</li>
           <li class="slider-indicator text-hide fl">2</li>
           <li class="slider-indicator text-hide fl">3</li>
           <li class="slider-indicator text-hide fl">4</li>
       </ol>
       <a href="javascript:;" class="slider-control slider-control-left">&lt;</a>
       <a href="javascript:;" class="slider-control slider-control-right">&gt;</a>
   </div>

<script src="../JS/jquery.js"></script>
<script src="../JS/transition.js"></script>
<script src="../JS/showHide.js"></script>
<script src="../JS/slider.js"></script>
<script>
   var focusSlider = $('#focus-slider');

   focusSlider.slider({
       css3:true,
       js:false,
       animation:'fade',
       activeIndex:2,  //默认第几张图片
       interval: 0
   });
</script>
</body>
</html>


(function ($) {
   'use strict';

   function Slider($elem, options){
       this.$elem = $elem;
       this.options = options;

       this.$items = this.$elem.find('.slider-item');
       this.$indicators = this.$elem.find('.slider-indicator');
       this.$controls = this.$elem.find('.slider-control');

       this.curIndex = this.options.activeIndex;

       this._init();
   }

   Slider.DEFAULTS = {
       css3:false,
       js:false,
       animation:'fade',
       activeIndex:0,  //默认第几张图片
       interval: 0  //自动切换时间间隔
   };
   //初始化
   Slider.prototype._init = function(){
       var self = this;

   //    init show
   this.$indicators.removeClass('slider-indicator-active');
   this.$indicators.eq(this.curIndex).addClass('slider-indicator-active');

   //to
       if (this.options.animation === 'slide'){
           this.$elem.addClass('slider-slide');
           this.to = this._slide;
       }else {  //fade
           this.$elem.addClass('slider-fade');
           this.$items.eq(this.curIndex).show();
           this.to = this._fade;
       }

       //showHide init
       this.$elem.showHide(this.options);


   //    bind event
       this.$elem
           .hover(function () {
               self.$controls.show();
           }, function () {
               self.$controls.hide();
           })  //左右按钮切换  利用事件代理
           .on('click', 'slider-control-left', function () {
               self.to(self.curIndex - 1);
           })
           .on('click', 'slider-control-right', function () {
               self.to(self.curIndex + 1);
           });
   };
   //幻灯片切换
   Slider.prototype._fade = function(index){
       this.$elem.eq(this.curIndex).showHide('hide'); //当前的索引
       this.$elem.eq(index).showHide('show');  //指定的索引

       this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active');
       this.$indicators.eq(index).addClass('slider-indicator-active');
       this.curIndex = index;
   };

   Slider.prototype._slide = function(){

   };

   Slider.prototype.auto = function(){

   };

   Slider.prototype.pause = function(){

   };

   $.fn.extend({
       slider:function (option) {
           return this.each(function () {
               var $this = $(this),
                   slider = $this.data('slider'),
                   options = $.extend({},Slider.DEFAULTS,$(this).data(),typeof option === 'object' && option);

               if (!slider){
                   $this.data('dropdown',slider = new Slider($this,options));
               }
               if (typeof slider[option] === 'function'){
                   slider[option]();
               }
           });
       }
   });
})(jQuery);


(
   function ($) {
   'use strict';
//兼容IE
   var transition = window.mt.transition;

//初始化提取
   function init($elem, hiddenCallback) {
       if ($elem.is(':hidden')) {  //hidden
           $elem.data('status', 'hidden');
           if (typeof hiddenCallback === 'function') hiddenCallback();
       } else { //show
           $elem.data('status', 'shown');
       }
   }
   function show($elem,callback) {
       if ($elem.data('status') === 'show') return;
       if ($elem.data('status') === 'shown') return;
       $elem.data('status','show').trigger('show');
       callback();
   }
   function hide($elem,callback) {
       if ($elem.data('status') === 'hide') return;
       if ($elem.data('status') === 'hidden') return;
       $elem.data('status','hide').trigger('hide');
       callback();
   }
   var slient = {
       init:init,
       show:function ($elem) {
           show($elem,function () {
               $elem.show();
               $elem.data('status','shown').trigger('shown');
           });

       },
       hide:function ($elem) {
           hide($elem,function () {
               $elem.hide();
               $elem.data('status','hidden').trigger('hidden');
           });
       }
   };
   //css3样式设计
   var css3 = {
       fade:{
           init:function($elem){
               css3._init($elem,'fadeOut');
           },
           show:function ($elem) {
               css3._show($elem,'fadeOut');
           },
           hide:function ($elem) {
               css3._hide($elem, 'fadeOut');
           }
       },
       slideUpDown:{
           init: function ($elem) {
               $elem.height($elem.height());
               css3._init($elem,'slideUpDownCollapse')
           },
           show: function ($elem) {
               css3._show($elem,'slideUpDownCollapse');
           },
           hide:function ($elem) {
               css3._hide($elem,'slideUpDownCollapse');
           }
       },
       slideLeftRight:{
           init: function ($elem) {
               $elem.width($elem.width());
               css3._init($elem,'slideLeftRightCollapse')
           },
           show: function ($elem) {
               css3._show($elem,'slideLeftRightCollapse');
           },
           hide:function ($elem) {
               css3._hide($elem,'slideLeftRightCollapse');
           }
       },
       fadeSlideUpDown:{
           init: function ($elem) {
               $elem.height($elem.height());
               css3._init($elem,'fadeOut slideUpDownCollapse')
           },
           show: function ($elem) {
               css3._show($elem,'fadeOut slideUpDownCollapse');
           },
           hide:function ($elem) {
               css3._hide($elem,'fadeOut slideUpDownCollapse');
           }
       },
       fadeSlideLeftRight:{
           init: function ($elem) {
               $elem.width($elem.width());
               css3._init($elem,'fadeOut slideLeftRightCollapse')
           },
           show: function ($elem) {
               css3._show($elem,'fadeOut slideLeftRightCollapse');
           },
           hide:function ($elem) {
               css3._hide($elem,'fadeOut slideLeftRightCollapse');
           }
       }
   };
   css3. _init=function($elem,className){
       $elem.addClass('transition');
       init($elem,function () {
           $elem.addClass(className);
       })
   };
   css3._show = function ($elem,className) {
       show($elem,function () {
           $elem.off(transition.end).one(transition.end,function () {
               $elem.data('status','shown').trigger('shown');
           });
           $elem.show();
           setTimeout(function () {
               $elem.removeClass(className);
           },20);
       });
   };
   css3._hide = function ($elem,className) {
       hide($elem, function () {
           $elem.off(transition.end).one(transition.end, function () {
               $elem.hide();
               $elem.data('status', 'hidden').trigger('hidden');
           });
           $elem.addClass(className);
       })
   };
   //js样式设计
   var js = {
       fade:{
           init:function($elem){
               js._init($elem);
           },
           show:function ($elem) {
               js._show($elem,'fadeIn');
           },
           hide:function ($elem) {
               js._hide($elem,'fadeOut');
           }
       },
       slideUpDown:{
           init:function($elem){
               js._init($elem);
           },
           show:function ($elem) {
               js._show($elem,'slideDown');
           },
           hide:function ($elem) {
               js._hide($elem,'slideUp');
           }
       },
       slideLeftRight:{
           init:function ($elem) {
               js._customInit($elem,{
                   'width':0,
                   'padding-left':0,
                   'padding-right':0
               });
           },
           show:function ($elem) {
               js._customShow($elem);
           },
           hide:function ($elem) {
               js._customHide($elem,{
                   'opacity':0,
                   'width':0,
                   'padding-left':0,
                   'padding-right':0
               });
           }
       },
       fadeSlideUpDown:{
           init:function ($elem) {
               js._customInit($elem,{
                   'opacity':0,
                   'height':0,
                   'padding-top':0,
                   'padding-bottom':0
               });
           },
           show:function ($elem) {
               js._customShow($elem);
           },
           hide:function ($elem) {
               js._customHide($elem,{
                   'opacity':0,
                   'height':0,
                   'padding-top':0,
                   'padding-bottom':0
               });
           }
       },
       fadeSlideLeftRight:{
           init:function ($elem) {
               js._customInit($elem,{
                   'opacity':0,
                   'width':0,
                   'padding-left':0,
                   'padding-right':0
               });
           },
           show:function ($elem) {
               js._customShow($elem);
           },
           hide:function ($elem) {
               js._customHide($elem,{
                   'opacity':0,
                   'width':0,
                   'padding-left':0,
                   'padding-right':0
               });
           }
       }
   };
//jQuery  fade slideUpDown样式提取
   js._init = function ($elem,hiddenCallback) {
       $elem.removeClass('transition');
       init($elem,hiddenCallback);
   };
   js._show = function ($elem,mode) {
       show($elem,function () {
           $elem.stop()[mode](function () {
               $elem.data('status','shown').trigger('shown');
           })
       })
   };
   js._hide = function ($elem,mode) {
       hide($elem,function () {
           $elem.stop()[mode](function () {
               $elem.data('status','hidden').trigger('hidden');
           })
       })
   };
//fadeSlideUpDown slideLeftRight 样式提取
   js._customInit = function ($elem,options) {
       var styles = {};
       for (var p in options){
           styles[p] = $elem.css(p);
       }
       $elem.data('styles',styles);
       js._init($elem,function () {
           $elem.css(options);
       });
   };
   js._customShow = function ($elem) {
       show($elem,function () {
           $elem.show();
           $elem.stop().animate($elem.data('styles'),function () {
               $elem.data('status','shown').trigger('shown');
           });
       });
   };
   js._customHide = function ($elem,options) {
       hide($elem, function () {
           $elem.stop().animate(options, function () {
               $elem.hide();
               $elem.data('status', 'hidden').trigger('hidden');
           });
       });
   };

   //提供方法供外部调用
   var defaults = {
       css3:false,
       js:false,
       animation:'fade'
   };
   function showHide($elem,options) {
     var mode = null;
   //  判断浏览器兼容css3就用css3，不兼容就用js 否则没有效果
       if (options.css3 && transition.isSupport){ //css3 transition
           mode =  css3[options.animation] || css3[defaults.animation];
       } else if (options.js){ //js animation
           mode =  js[options.animation] || js[defaults.animation];
       } else {  //no animation
           mode =  slient;
       }

       mode.init($elem);
       return{
           show:$.proxy(mode.show,this,$elem),
           hide:$.proxy(mode.hide,this,$elem)
       };
   }

   $.fn.extend({
       showHide: function (option) {
           return this.each(function () {
               var $this = $(this),
                   options = $.extend({},defaults,typeof option === 'object' && option),
                   mode = $this.data('showHide');
               if (!mode) {
                   $this.data('showHide', mode = showHide($this, options));
               }
               if (typeof mode[option] === 'function') {
                   mode[option]();
               }
           });
       }
   })

   // window.mt = window.mt || {};
   // window.mt.showHide = showHide;

})(jQuery);

写回答

1回答

好帮手慕慕子

2019-11-26

已采纳

同学你好， 针对你粘贴的这部分代码存在的问题解答如下：

  1. 获取左右按钮元素类名前需要添加点

    http://img.mukewang.com/climg/5ddc8f6e098c161708740415.jpg

  2. 对所有的幻灯片元素进行初始化以及切换时的显示隐藏操作

    http://img.mukewang.com/climg/5ddc904909ffae0c10950461.jpg

如果帮助到了你，欢迎采纳，祝学习愉快~

0

0 学习 · 14456 问题

查看课程

相似问题

触发图片四种状态的自定义事件打印顺序跟老师的不同

回答 1

老师有点理解不了

回答 2

老师求助：点击按钮，图片不切换。

回答 1

老师求助：更换JS引入后，单击按钮图片不切换。

回答 1

请问这种添加一张图片的方式实现轮播图的情况，如何发送消息，请老师指正

回答 2

打开慕课网App查看更多内容