老师求助：点击按钮，图片不切换。
来源：3-4 幻灯片的js--初始化、切换和绑定事件
我学习太差被关起来了
2020-11-14 22:09:50
# 具体遇到的问题
点击按钮，图片不切换，控制台也没有报错。
# 内容截图
我认为错误应该在slider.js或slider.html，而transition.js和showHide.js应该是没有问题的。因为前面的章节，我跟着视频写的页面都能够正常显示，现在卡在这里：图片不切换。
# 粘贴相关代码
我的程序目录如下：
slider.html如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>幻灯片</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link type="text/css" rel="stylesheet" href="../../reset.css">
<link type="text/css" rel="stylesheet" href="../css/public.css">
<style type="text/css">
/*幻灯片*/
.slider
{
overflow: hidden;
position: relative;
width: 728px;
height: 504px;
}
/*索引点列表*/
.slider__index
{
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
}
/*索引点*/
.slider__index__dot
{
display: inline-block;
margin: 0 8px;
border-radius: 50%;
width: 10px;
height: 10px;
background-color: #313A43;
cursor: pointer;
}
/*当前索引点*/
.slider__index__dot-on
{
box-shadow: 0 0 3px 3px rgba(111, 122, 133, .8);
background-color: #F7F8F9;
}
/*按钮*/
.ui-slider__btn
{
display: none;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
outline-style: none;
width: 28px;
height: 62px;
line-height: 62px;
font-size: 26px;
text-align: center;
color: #FFF;
background-color: rgba(7, 17, 27, .5);
font-family: simsun;
}
/*下一张按钮*/
.ui-slider__btn.right
{
left: auto;
right: 0;
}
.ui-slider__btn:hover
{
font-weight: bold;
}
/*淡入淡出切换*/
.slider-fade .slider__container__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__container__item">
<a href="##"><img src="../img/focus-slider/0.png" alt="慕课手机"></a>
</div>
<div class="slider__container__item">
<a href="##"><img src="../img/focus-slider/1.png" alt="美的厨卫"></a>
</div>
<div class="slider__container__item">
<a href="##"><img src="../img/focus-slider/2.png" alt="联想平板电脑"></a>
</div>
<div class="slider__container__item">
<a href="##"><img src="../img/focus-slider/3.png" alt="耐克运动装备"></a>
</div>
</div>
<!-- 索引点列表 -->
<ol class="slider__index">
<!-- 索引点 -->
<li class="slider__index__dot hideText">0</li>
<li class="slider__index__dot hideText">1</li>
<li class="slider__index__dot hideText">2</li>
<li class="slider__index__dot hideText">3</li>
</ol>
<!-- 上一张按钮 -->
<button class="ui-slider__btn left" title="上一张"><</button>
<!-- 下一张按钮 -->
<button class="ui-slider__btn right" title="下一张">></button>
</div>
<script type="text/javascript" src="../../jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../js/transition.js"></script>
<script type="text/javascript" src="../js/showHide.js"></script>
<script type="text/javascript" src="../js/slider.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
let $slider = $("#focus__slider");
$slider.slider({
css: true,
js: true,
animation: "fade", // "fade"为淡入淡出，"slide"为平移
iniIdx: 2, // 初始显示的图片
interval: 1000, // 自动轮播的间隔时间
});
});
</script>
</body>
</html>
slider.js如下：
(function($)
{
"use strict";
function Slider($ele, options)
{
this.$ele = $ele;
this.options = options;
// 获取图片div
this.$items = this.$ele.find(".slider__container__item");
// 获取索引点
this.$dots = this.$ele.find(".slider__index__dot");
// 获取上一张、下一张按钮
this.$btns = this.$ele.find(".ui-slider__btn");
// 获取当前索引值
this.onIdx = this.options.iniIdx;
// 初始化
this._init();
}
// 默认参数
Slider.DEFAULTS = {
css: false,
js: false,
animation: "fade", // "fade"为淡入淡出，"slide"为平移
iniIdx: 0, // 初始显示的图片
interval: 0, // 自动轮播的间隔时间（单位：毫秒。0表示不开启自动轮播）
};
Slider.prototype._init = function()
{
let self = this;
// 显示当前索引点
this.$dots.removeClass("slider__index__dot-on");
this.$dots.eq(this.onIdx).addClass("slider__index__dot-on");
// 选择切换方式
if (this.options.animation === "slide")
{
this.$ele.addClass("slider-slide");
this.setIdx = this._slide;
}
else
{
this.$ele.addClass("slider-fade");
this.$items.eq(this.onIdx).show();
this.setIdx = this._fade;
}
this.$items.showHide(this.options);
this.$ele.
hover(function()
{
// 鼠标移入，按钮显示
self.$btns.show();
}, function()
{
// 鼠标移出，按钮隐藏
self.$btns.hide();
}).
on("click", ".ui-slider__btn.left", function()
{
// 上一张按钮
self.setIdx(self.onIdx--);
}).
on("click", ".ui-slider__btn.right", function()
{
// 下一张按钮
self.setIdx(self.onIdx++);
});
}
// 淡入淡出切换
Slider.prototype._fade = function(newIdx)
{
// 旧图片隐藏
this.$items.eq(this.onIdx).showHide("hide");
// 新图片显示
this.$items.eq(newIdx).showHide("show");
// 更改当前索引点
this.$dots.eq(this.onIdx).removeClass("slider__index__dot-on");
this.$dots.eq(newIdx).addClass("slider__index__dot-on");
// 更改当前索引值
this.onIdx = newIdx;
}
// 平移切换
Slider.prototype._slide = function(newIdx)
{
}
// 开始自动轮播
Slider.prototype.startAutoplay = function()
{
}
// 结束自动轮播
Slider.prototype.endAutoplay = function()
{
}
// 在jQuery上自定义函数slider
$.fn.slider = function(option)
{
return this.each(function()
{
let $this = $(this),
funSlider = $this.data("slider"),
args = $.extend(
{},
Slider.DEFAULTS,
$this.data(),
typeof option === "object" && option);
!funSlider ? $this.data("slider", funSlider = new Slider($this, args)) : 1;
typeof funSlider[option] === "function" ? funSlider[option]() : 1;
});
};
})(jQuery);
transition.js如下：
// 解决transitionend事件的兼容性问题
// console.log(document.body.style.transition);
(function()
{
// transitionend事件名
let transitionendEvent =
{
transition: "transitionend",
MozTransition: "transitionend",
WebkitTransition: "webkitTransitionEnd",
OTransition: "oTransitionEnd otransitionend",
};
let transitionend = "",
isSupported = false;
for (let i in transitionendEvent)
{
if (document.body.style[i] !== undefined)
{
transitionend = transitionendEvent[i];
isSupported = true;
break;
}
}
// 全局变量MUTAO
window.MUTAO = window.MUTAO || {};
window.MUTAO =
{
transitionend: transitionend,
isSupported: isSupported,
};
})();
showHide.js如下：
(function($)
{
"use strict";
/**************************** module 1: start ****************************/
let silentAnimation =
{
// 初始化
init: function($ele)
{
init($ele);
console.log("silentAnimation init");
},
// 显示
show: function($ele)
{
show($ele, function()
{
// 调用jQuery的show方法
$ele.show();
// 触发自定义的shown事件，设置状态为shown
$ele.trigger("shown").data("status", "shown");
});
console.log("silentAnimation show");
},
// 隐藏
hide: function($ele)
{
hide($ele, function()
{
// 调用jQuery的hide方法
$ele.hide();
// 触发自定义的hidden事件，设置状态为hidden
$ele.trigger("hidden").data("status", "hidden");
});
console.log("silentAnimation hide");
},
};
/**************************** module 1: end ****************************/
/**************************** module 2: start ****************************/
let cssAnimation =
{
_init: function($ele, classname)
{
$ele.addClass("transition");
init($ele, function()
{
$ele.addClass(classname);
});
},
_show: function($ele, classname)
{
show($ele, function()
{
// 动画结束后，触发自定义的shown事件，设置状态为shown
$ele.off(window.MUTAO.transitionend).one(window.MUTAO.transitionend, function()
{
$ele.trigger("shown").data("status", "shown");
});
// 先显示
$ele.show();
// 后动画过渡
setTimeout(function()
{
$ele.removeClass(classname);
});
});
},
_hide: function($ele, classname)
{
hide($ele, function()
{
// 然后在动画结束后，隐藏
$ele.off(window.MUTAO.transitionend).one(window.MUTAO.transitionend, function()
{
$ele.hide();
// 触发自定义的hidden事件，设置状态为hidden
$ele.trigger("hidden").data("status", "hidden");
});
// 先动画过渡
$ele.addClass(classname);
});
},
// 淡入淡出效果
fade:
{
// 初始化
init: function($ele)
{
cssAnimation._init($ele, "fadeOut");
console.log("cssAnimation.fade init");
},
// 淡入
show: function($ele)
{
cssAnimation._show($ele, "fadeOut");
console.log("cssAnimation.fade show");
},
// 淡出
hide: function($ele)
{
cssAnimation._hide($ele, "fadeOut");
console.log("cssAnimation.fade hide");
},
},
// 上下滑动效果
slideUpDown:
{
// 初始化
init: function($ele)
{
// 设置高度
$ele.height($ele.height());
cssAnimation._init($ele, "slideUpDownCollapse");
console.log("cssAnimation.slideUpDown init");
},
// 上下滑动显示
show: function($ele)
{
cssAnimation._show($ele, "slideUpDownCollapse");
console.log("cssAnimation.slideUpDown show");
},
// 上下滑动隐藏
hide: function($ele)
{
cssAnimation._hide($ele, "slideUpDownCollapse");
console.log("cssAnimation.slideUpDown hide");
},
},
// 左右滑动效果
slideLeftRight:
{
// 初始化
init: function($ele)
{
// 设置宽度
$ele.width($ele.width());
cssAnimation._init($ele, "slideLeftRightCollapse");
console.log("cssAnimation.slideLeftRight init");
},
// 左右滑动显示
show: function($ele)
{
cssAnimation._show($ele, "slideLeftRightCollapse");
console.log("cssAnimation.slideLeftRight show");
},
// 左右滑动隐藏
hide: function($ele)
{
cssAnimation._hide($ele, "slideLeftRightCollapse");
console.log("cssAnimation.slideLeftRight hide");
},
},
// 淡入淡出+上下滑动效果
fadeSlideUpDown:
{
// 初始化
init: function($ele)
{
// 设置高度
$ele.height($ele.height());
cssAnimation._init($ele, "fadeOut slideUpDownCollapse");
console.log("cssAnimation.fadeSlideUpDown init");
},
// 上下滑动显示
show: function($ele)
{
cssAnimation._show($ele, "fadeOut slideUpDownCollapse");
console.log("cssAnimation.fadeSlideUpDown show");
},
// 上下滑动隐藏
hide: function($ele)
{
cssAnimation._hide($ele, "fadeOut slideUpDownCollapse");
console.log("cssAnimation.fadeSlideUpDown hide");
},
},
// 淡入淡出+左右滑动效果
fadeSlideLeftRight:
{
// 初始化
init: function($ele)
{
// 设置宽度
$ele.width($ele.width());
cssAnimation._init($ele, "fadeOut slideLeftRightCollapse");
console.log("cssAnimation.fadeSlideLeftRight init");
},
// 左右滑动显示
show: function($ele)
{
cssAnimation._show($ele, "fadeOut slideLeftRightCollapse");
console.log("cssAnimation.fadeSlideLeftRight show");
},
// 左右滑动隐藏
hide: function($ele)
{
cssAnimation._hide($ele, "fadeOut slideLeftRightCollapse");
console.log("cssAnimation.fadeSlideLeftRight hide");
},
},
};
/**************************** module 2: end ****************************/
/**************************** module 3: start ****************************/
let jsAnimation =
{
_init: function($ele, callback)
{
$ele.removeClass("transition");
init($ele, callback);
},
_show: function($ele, method)
{
show($ele, function()
{
$ele.stop()[method](function()
{
// 触发自定义shown事件，设置status状态
$ele.trigger("shown").data("status", "shown");
});
});
},
_hide: function($ele, method)
{
hide($ele, function()
{
$ele.stop()[method](function()
{
// 触发自定义hidden事件，设置status状态
$ele.trigger("hidden").data("status", "hidden");
});
});
},
_cusInit: function($ele, oProperty)
{
let styles = {};
for (let i in oProperty)
{
styles[i] = $ele.css(i);
}
// 保存元素的宽度信息
$ele.data("styles", styles);
jsAnimation._init($ele, function()
{
$ele.css(oProperty);
});
},
_cusShow: function($ele)
{
show($ele, function()
{
$ele.show();
$ele.stop().animate($ele.data("styles"), function()
{
// 动画结束后，触发shown事件，设置status状态
$ele.trigger("shown").data("status", "shown");
});
});
},
_cusHide: function($ele, oProperty)
{
hide($ele, function()
{
$ele.stop().animate(oProperty, function()
{
$ele.hide();
// 动画结束后，触发hidden事件，设置status状态
$ele.trigger("hidden").data("status", "hidden");
});
});
},
// 淡入淡出效果
fade:
{
// 初始化
init: function($ele)
{
jsAnimation._init($ele);
console.log("jsAnimation.fade init");
},
// 淡入
show: function($ele)
{
jsAnimation._show($ele, "fadeIn");
console.log("jsAnimation.fade show");
},
// 淡出
hide: function($ele)
{
jsAnimation._hide($ele, "fadeOut");
console.log("jsAnimation.fade hide");
},
},
// 上下滑动效果
slideUpDown:
{
// 初始化
init: function($ele)
{
jsAnimation._init($ele);
console.log("jsAnimation.slideUpDown init");
},
// 下滑显示
show: function($ele)
{
jsAnimation._show($ele, "slideDown");
console.log("jsAnimation.slideUpDown show");
},
// 上滑隐藏
hide: function($ele)
{
jsAnimation._hide($ele, "slideUp");
console.log("jsAnimation.slideUpDown hide");
},
},
// 左右滑动效果
slideLeftRight:
{
// 初始化
init: function($ele)
{
jsAnimation._cusInit($ele, {
"width": 0,
"padding-left": 0,
"padding-right": 0,
});
console.log("jsAnimation.slideLeftRight init");
},
// 显示
show: function($ele)
{
jsAnimation._cusShow($ele);
console.log("jsAnimation.slideLeftRight show");
},
// 隐藏
hide: function($ele)
{
jsAnimation._cusHide($ele, {
"width": 0,
"padding-left": 0,
"padding-right": 0,
});
console.log("jsAnimation.slideLeftRight hide");
},
},
// 淡入淡出+上下滑动
fadeSlideUpDown:
{
// 初始化
init: function($ele)
{
jsAnimation._cusInit($ele, {
"opacity": 0,
"height": 0,
"padding-top": 0,
"padding-bottom": 0,
});
console.log("jsAnimation.fadeSlideUpDown init");
},
// 显示
show: function($ele)
{
jsAnimation._cusShow($ele);
console.log("jsAnimation.fadeSlideUpDown show");
},
// 隐藏
hide: function($ele)
{
jsAnimation._cusHide($ele, {
"opacity": 0,
"height": 0,
"padding-top": 0,
"padding-bottom": 0,
});
console.log("jsAnimation.fadeSlideUpDown hide");
},
},
// 淡入淡出+左右滑动
fadeSlideLeftRight:
{
// 初始化
init: function($ele)
{
jsAnimation._cusInit($ele, {
"opacity": 0,
"width": 0,
"padding-left": 0,
"padding-right": 0,
});
console.log("jsAnimation.fadeSlideLeftRight init");
},
// 显示
show: function($ele)
{
jsAnimation._cusShow($ele);
console.log("jsAnimation.fadeSlideLeftRight show");
},
// 隐藏
hide: function($ele)
{
jsAnimation._cusHide($ele, {
"opacity": 0,
"width": 0,
"padding-left": 0,
"padding-right": 0,
});
console.log("jsAnimation.fadeSlideLeftRight hide");
},
},
};
/**************************** module 3: end ****************************/
/**************************** module 4: start ****************************/
function init($ele, hiddenCallback)
{
if ($ele.is(":hidden") || $ele.css("visibility") === "hidden")
{
$ele.data("status", "hidden");
typeof hiddenCallback === "function" ? hiddenCallback() : 1;
}
else
{
$ele.data("status", "shown");
}
}
function show($ele, callback)
{
// 若已显示，则返回
if ($ele.data("status") === "show" || $ele.data("status") === "shown")
{
return;
}
// 触发自定义的show事件，设置状态为show
$ele.trigger("show").data("status", "show");
callback();
}
function hide($ele, callback)
{
// 若已隐藏，则返回
if ($ele.data("status") === "hide" || $ele.data("status") === "hidden")
{
return;
}
// 触发自定义的hide事件，设置状态为hide
$ele.trigger("hide").data("status", "hide");
callback();
}
/**************************** module 4: end ****************************/
/**************************** module 5: start ****************************/
let defaults = {css: false, js: false, animation: "fade"};
function showHide($ele, options)
{
let mode = null;
// 使用CSS动画
if (options.css && MUTAO.isSupported)
{
mode = cssAnimation[options.animation] || cssAnimation[defaults.animation];
}
// 使用JS动画
else if (options.js)
{
mode = jsAnimation[options.animation] || jsAnimation[defaults.animation];
}
// 不使用动画
else
{
mode = silentAnimation;
}
mode.init($ele);
return {
show: $.proxy(mode.show, this, $ele),
hide: $.proxy(mode.hide, this, $ele),
};
}
$.fn.extend({
showHide: function(args)
{
return this.each(function()
{
let $this = $(this),
mode = $this.data("showHide"),
options = $.extend({}, defaults, typeof args === "object" && args);
if (!mode)
{
$this.data("showHide", mode = showHide($this, options));
}
(typeof mode[args]) === "function" ? mode[args]() : 1;
});
},
});
/**************************** module 5: end ****************************/
})(jQuery);
public.css如下：
/**************** 公共样式 开始 ****************/
/*定宽样式*/
.wrap
{
margin: 0 auto;
width: 1200px;
min-width: 1200px;
}
/*左浮动*/
.fl
{
float: left;
}
/*右浮动*/
.fr
{
float: right;
}
/*清除浮动*/
.clearfix::after
{
display: block;
content: " ";
height: 0;
clear: both;
zoom: 1;
}
/*文字隐藏*/
.hideText
{
text-indent: -9999px;
overflow: hidden;
}
/*文字溢出省略号处理*/
.textOverflowEllipsis
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*超链接样式*/
.link
{
color: #4D555D;
}
/*超链接样式*/
.link:hover
{
color: #F01414 !important;
cursor: pointer;
}
@font-face
{
font-family: "iconfont";
src: url('../iconfont-sidebar-service/iconfont.eot?t=1477124206');
src: url('../iconfont-sidebar-service/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'),
url('../iconfont-sidebar-service/iconfont.woff?t=1477124206') format('woff'),
url('../iconfont-sidebar-service/iconfont.ttf?t=1477124206') format('truetype'),
url('../iconfont-sidebar-service/iconfont.svg?t=1477124206#iconfont') format('svg');
}
.icon
{
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
/**************** 公共样式 结束 ****************/
/**************** 下拉菜单dropDown样式 开始 ****************/
/*下拉菜单*/
.dropDown
{
position: relative;
}
/*切换文字*/
.dropDown-toggle
{
position: relative;
z-index: 1;
}
/*下拉箭头*/
.dropDown-arrow
{
position: absolute;
}
/*下拉层，默认隐藏*/
.dropDown-layer
{
display: none;
overflow: hidden;
position: absolute;
z-index: 3;
}
/*下拉层左对齐*/
.dropDown-left
{
left: 0;
right: auto;
}
/*下拉层右对齐*/
.dropDown-right
{
right: 0;
left: auto;
}
/* 动画时间 */
.transition
{
-o-transition: all .4s;
-ms-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.cartTransition
{
-o-transition: all .1s;
-ms-transition: all .1s;
-moz-transition: all .1s;
-webkit-transition: all .1s;
transition: all .1s;
}
/*淡出效果*/
.fadeOut
{
opacity: 0 !important;
visibility: hidden !important;
}
/* 上下滑动隐藏 */
.slideUpDownCollapse
{
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* 左右滑动隐藏 */
.slideLeftRightCollapse
{
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.dropDown-loading
{
margin: 20px;
width: 32px;
height: 32px;
background-image: url(../img/loading.gif);
background-repeat: no-repeat;
}
/**************** 下拉菜单dropDown样式 结束 ****************/
/**************** 搜索框样式 开始 ****************/
/*搜索部分*/
.search
{
position: relative;
border: 1px solid #CFD2D5;
}
/*搜索输入框*/
.search-input
{
outline-color: #DFDFDF;
border-style: none;
padding: 0 10px;
width: 580px;
height: 40px;
line-height: 40px;
font-size: 16px;
background-color: #FFF;
}
/*搜索按钮*/
.search-button
{
border-style: none;
width: 72px;
height: 40px;
line-height: 36px;
font-size: 15px;
text-align: center;
color: #FFF;
background-color: #07111B;
cursor: pointer;
}
/*搜索下拉层*/
.search-layer
{
display: none;
position: absolute;
top: 100%;
left: -1px;
border: 1px solid #CFD2D5;
width: 100%;
background-color: #FFF;
}
/*搜索下拉层选项*/
.search-layer-item
{
height: 24px;
line-height: 24px;
padding: 2px 8px;
font-size: 15px;
cursor: pointer;
}
.search-layer-item:hover
{
background-color: #F3F5F7;
}
/**************** 搜索框样式 结束 ****************/
/**************** focus区 开始 ****************/
.category
{
position: relative;
margin-top: -62px;
width: 208px;
font-size: 14px;
}
.category .dropDown
{
position: static;
}
.category .dropDown-toggle
{
height: 36px;
line-height: 36px;
padding-left: 16px;
color: #FFF;
}
.category .dropDown-link
{
color: #FFF;
}
.category .dropDown-arrow
{
position: absolute;
top: 0;
right: 12px;
font-family: 黑体;
font-weight: bold;
}
.category-on .dropDown-toggle,
.category-on .dropDown-link
{
color: #F01414;
}
.category-on .dropDown-toggle
{
background-color: #FFF;
}
.category .dropDown-layer
{
top: 54px;
left: 100%;
padding: 8px 0 30px 0;
width: 744px;
min-height: 472px;
background-color: #FFF;
box-shadow: 0 0 4px rgba(7, 27, 47, .2);
}
.category-details
{
margin-top: 24px;
width: 744px;
line-height: 22px;
}
.category-details-title
{
border-right: 1px solid #D9DDE1;
padding-right: 16px;
width: 84px;
text-align: right;
font-weight: bold;
color: #07111B;
cursor: pointer;
}
.category-details-item
{
margin-bottom: 10px;
padding-left: 15px;
width: 592px;
cursor: pointer;
}
.category-details-item:last-of-type
{
margin-bottom: 0;
}
.category-details-item > .link
{
display: inline-block;
margin-right: 16px;
}
.focus__wrap__category__list .dropDown-loading
{
margin: 230px auto;
background-size: 45px;
width: 45px;
height: 45px;
}
/**************** focus区 结束 ****************/
写回答
1回答
-
同学你好，是索引计算后值的问题。以下面变量为例：
初始a的值为1，a++的返回值为1，但是a实际经过了加1，所以a的值为2 。
当前代码中也是一样的，self.onIdx的值为2，self.onIdx++返回值为2，而self.onIdx的值为3，已经是下一张图片的索引了。代码中设置self.onIdx索引的图片隐藏，newIdx（self.onIdx++）索引的图片显示是没有切换效果的。
建议调换一下：
另外建议索引记得做临界判断，不要一直增加或者减少。
祝学习愉快！
0
相似问题
老师为啥点了后图片不切换
回答 1
老师这个部分如何理解？
回答 2