关于console.log的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>slider</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/common.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="banner-slider" class="slider">
<div class="slider-container">
<div class="slider-item">
<a href="###" target="_blank"><img src="../img/focus-slider/1.jpg" alt=""></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="../img/focus-slider/2.jpg" alt=""></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="../img/focus-slider/3.jpg" alt=""></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="../img/focus-slider/4.jpg" alt=""></a>
</div>
</div>
<ol class="slider-indicator-wrap">
<li class="slider-indicator text-hidden fl">1</li>
<li class="slider-indicator text-hidden fl">2</li>
<li class="slider-indicator text-hidden fl">3</li>
<li class="slider-indicator text-hidden fl">4</li>
</ol>
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></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 $bannerSlider = $('#banner-slider');
$bannerSlider.slider({
css3:true,
js:false,
animation:'fade',
activeIndex:2,
interval:500
});
</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{
this.$elem.addClass('slider-fade')
this.$items.eq(this.curIndex).show();
this.to = this._fade;
}
// showHide init
this.$items.showHide(this.options);
// bind event
this.$elem
.hover(function(){
self.$controls.show();
},function(){
self.$controls.hide();
})
.on('click','.slider-control-left',function(){
// console.log(curIndex);
self.to(self.curIndex - 1);
})
.on('click','.slider-control-right',function(){
// console.log(curIndex);
self.to(self.curIndex + 1);
});
};
Slider.prototype._fade = function(index){
this.$items.eq(this.curIndex).showHide('hide');
this.$items.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);
var slider = $this.data('slider');
var options = $.extend({},Slider.DEFAULTS,$this.data(),typeof option === 'object' && option);
if(!slider){
$this.data('slider',slider = new Slider($this,options))
}
if(typeof slider[option] === 'function'){
slider[option]();
}
});
}
})
})(jQuery);
加粗地方的console.log()，如果是self.curIndex的话，是正常的。但是如果把self.去掉，系统会报错。curIndex is not defined 。这个没关系我知道找不到…但是为什么程序不能正常运行了（就是点左右箭头不切换了）。
我一直以为console.log的作用只是在控制台打印东西，即便报错也跟整个程序运行没有什么关系。难道console.log出错，浏览器就不再向下解析文档了么？
我试了一下，在文档里面加了一些错误的，如console.log（haha）之类的。文档也会报其它的错误…
正在回答
同学你好， 对于你的问题解答如下：
因为系统报错后，代码就不会再继续执行了， 所以左右箭头不能够正常切换
console.log语句的作用是在控制台打印东西，但是它同时属于整个程序中的一部分代码，如果出现报错，那就不会再往下执行程序了
如果直接添加console.log(haha)子类的语句， haha会被当做变量，由于变量没有声明直接使用，所以会导致程序报错
如果帮助到了你， 欢迎采纳，祝学习愉快~~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星