为什么第四张图片加载不出来呢

首页课程实战体系课手记专栏慕课教程

为什么第四张图片加载不出来呢

来源：6-3 按需加载--重复加载和代码优化

慕后端5428016

2019-12-31 17:45:41

<!DOCTYPE html>

<html>

<head>

.slider{

width: 728px;

height: 504px;

position: relative;

overflow: hidden;

}

.slider-indicator-wrap{

position: absolute;

bottom: 24px;

left: 50%;

margin-left: -36px;

}

.slider-indicator{

width: 8px;

height: 8px;

background: #313a43;

border-radius: 50%;

margin-right: 12px;

cursor: pointer;

}

.slider-indicator-active{

background: #f7f8f9;

border:2px solid #858b92;

position: relative;

top: -2px;

}

.slider-control{

display: none;

position: absolute;

top: 50%;

margin-top: -31px;

width: 28px;

height: 62px;

line-height: 62px;

background: #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-container{

}

.slider-fade .slider-item{

display: none;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.slider-slide .slider-item{

position: absolute;

top: 0;

left: 100%;

width: 100%;

height: 100%;

}

/*.slider-slide .slider-container{

position: absolute;

left:0%;

top: 0;

width: 1000%;

height: 100%;

background: red;

}

.slider-slide .slider-item{

float: left;

}*/

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</ol>

</div>

var $focusSlider=$('#focus-slider');

/*$focusSlider.on('slider-show slider-shown slider-hide slider-hidden',function(e,i,elem){

console.log(i+':'+e.type);

});*/

$focusSlider.items={};

$focusSlider.loadedItemNum=0;

$focusSlider.totalItemNum=$focusSlider.find('.slider-img').length;

$focusSlider.on('slider-show',$focusSlider.loadItem=function(e,index,elem){

if ($focusSlider.items[index]!=='loaded') {

$focusSlider.trigger('slider-loadItem',[index,elem]);

}

});

$focusSlider.on('slider-loadItem', function(e, index, elem) {

//按需加载

var $img = $(elem).find('.slider-img');

loadImg($img.data('src'), function(url) {

$img.attr('src', url);

$focusSlider.items[index] = 'loaded';

$focusSlider.loadedItemNum++;

console.log(index + ':loaded');

if ($focusSlider.loadedItemNum === $focusSlider.totalItemNum) {

//全部加载完毕

$focusSlider.trigger('slider-itemsLoaded');

}

}, function(url) {

console.log('从' + url + '加载图片失败');

//显示备用图片

$img.attr('src', '../img/focus-slider/placeholder.png');

});

$focusSlider.on('slider-itemsLoaded',function(e){

console.log('itemsLoaded');

//清楚事件

$focusSlider.off('slider-show', $focusSlider.loadItem);

});

function loadImg(url,imgLoaded,imgFailed){

var image=new Image();

image.onerror=function(){

if (typeof imgFailed==='function') imgFailed(url);

};

image.onload=function(){

if (typeof imgLoaded==='function') imgLoaded(url);

};

//image.src=url;

setTimeout(function(){

image.src=url;

},1000);

}

/*$focusSlider.slider({

css3:true,

js:false,

animation:'fade',

activeIndex:0,

interval:4000s

});*/

$focusSlider.slider({

css3:true,

js:false,

animation:'slide',

activeIndex:0,

interval:0

});

/*$focusSlider.on('slider-show',$focusSlider.loadItem=function(e,index,elem){

if ($focusSlider.items[index]!=='loaded') {

//按需加载

var $img=$(elem).find('.slider-img');

loadImg($img.data('src'),function(url){

$img.attr('src',url);

$focusSlider.items[index]='loaded';

$focusSlider.loadedItemNum++;

console.log(index+':loaded');

if ($focusSlider.loadedItemNum===$focusSlider.totalItemNum) {

//清楚事件

$focusSlider.off('slider-show',$focusSlider.loadItem);

}

},function(url){

console.log('从'+url+'加载图片失败');

//显示备用图片

$img.attr('src','../img/focus-slider/placeholder.png');

});

}

});*/

</script>

</body>

</html>

/*css reset*/

/*清除内外边距*/

body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/

ul, ol, li, dl, dt, dd, /*列表元素*/

form, fieldset, legend, input, button, select, textarea, /*表单元素*/

th, td, /*表格元素*/

pre {

padding: 0;

margin: 0;

}

/*重置默认样式*/

body, button, input, select, textarea {

/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/

color: #333;

font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;

}

h1, h2, h3, h4, h5, h6 {

font-size: 100%;

font-weight: normal;

}

em, i {

font-style: normal;

}

a {

text-decoration: none;

}

li {

list-style-type: none;

vertical-align: top;

}

img {

border: none;

/*display: block;*/

vertical-align: top;

}

textarea {

overflow: auto;

resize: none;

}

table {

border-spacing: 0;

border-collapse: collapse;

}

/*常用公共样式*/

.fl {

float: left;

display: inline;

}

.fr {

float: right;

display: inline;

}

.cf:before,

.cf:after {

content: " ";

display: table;

}

.cf:after {

clear: both;

}

.cf {

*zoom: 1;

}

/*公共样式*/

.container{

width: 1200px;

margin: 0 auto;

}

a.link{

color: #4d555d;

}

a.link:hover{

color: #f01414 !important;

}

.transition{

-o-transition: all 0.5s;

-ms-transition: all 0.5s;

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.text-ellipsis{

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

.text-hidden{

text-indent: -999999px;

overflow: hidden;

}

@font-face {font-family: "iconfont";

src: url('iconfont.eot?t=1577327507151'); /* IE9 */

src: url('iconfont.eot?t=1577327507151#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),

url('iconfont.woff?t=1577327507151') format('woff'),

url('iconfont.ttf?t=1577327507151') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

url('iconfont.svg?t=1577327507151#iconfont') format('svg'); /* iOS 4.1- */

}

.icon {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.icon-weibiaoti1:before {

content: "\e60b";

}

.icon-caipiao:before {

content: "\e611";

}

.icon-win:before {

content: "\e631";

}

.icon-zhongchou:before {

content: "\e634";

}

.icon-qq:before {

content: "\e66a";

}

.icon-fangdajing:before {

content: "\e617";

}

.icon-dabaitiao:before {

content: "\e659";

}

.icon-ai-app:before {

content: "\e622";

}

.icon-guoneijipiao:before {

content: "\e686";

}

.icon-shouye:before {

content: "\e606";

}

.icon-shouji:before {

content: "\e615";

}

.icon-xiala:before {

content: "\e616";

}

.icon-weixin:before {

content: "\e7b4";

}

.icon-huochepiaomianxing:before {

content: "\e8d8";

}

.icon-xiaoxi:before {

content: "\e67e";

}

.icon-ipad:before {

content: "\e609";

}

.icon-licai:before {

content: "\e6aa";

}

.icon-gouwucheweikong-copy:before {

content: "\e501";

}

.icon-youxi:before {

content: "\e6c6";

}

.icon-jiugongge:before {

content: "\e608";

}

.icon-huafei:before {

content: "\e727";

}

.icon-weibo:before {

content: "\e647";

}

.icon-CombinedShapex:before {

content: "\e602";

}

.icon-gouwuche:before {

content: "\e6f2";

}

.icon-Z:before {

content: "\e6b2";

}

.icon-guanbi:before {

content: "\e60a";

}

.icon-action-clapper:before {

content: "\e60c";

}

.icon-hebingxingzhuang:before {

content: "\e61c";

}

.icon-shuaxin:before {

content: "\e6cd";

}

.icon-shoucang:before {

content: "\e6ab";

}

.icon-changyongtubiao-xianxingdaochu-zhuanqu-:before {

content: "\e74c";

}

/*showHide*/

.fadeOut{

visibility: hidden !important;

opacity: 0 !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*/

.dropdown{

position: relative;

}

.dropdown-toggle{

position: relative;

z-index: 2

}

.dropdown-arrow{

display: inline-block;

line-height: 1;

vertical-align: middle;

}

.dropdown-layer{

z-index: 1;

display: none;

position: absolute;

}

.dropdown-left{

left: 0;

right: auto;

}

.dropdown-right{

right: 0;

left:auto;

}

.dropdown-loading{

width: 32px;

height: 32px;

background: url(../img/loading.gif)no-repeat;

margin: 20px;

}

.menu-active .dropdown-arrow{

-o-transform:rotate(180deg);

-ms-transform:rotate(180deg);

-moz-transform:rotate(180deg);

-webkit-transform:rotate(180deg);

transform:rotate(180deg);

}

/*menu dropdown*/

.menu .dropdown-toggle{

display: block;

height: 100%;

padding: 0 13px 0 12px;

border-left: 1px solid #f3f5f7;

border-right: 1px solid #f3f5f7;

}

.menu .dropdown-arrow{

margin-left: 5px;

}

.menu .dropdown-layer{

top: 43px;

background: #fff;

border:1px solid #cdd0d4;

}

.menu-item{

display: block;

height: 30px;

line-height: 30px;

padding: 0 12px;

color: #4d555d;

white-space: nowrap;

}

.menu-item:hover{

background: #f3f5f7;

}

.menu-active .dropdown-toggle{

background-color:#fff;

border-color: #cdd0d4;

}

/*search*/

.search{

position: relative;

border:1px solid #cfd2d5;

}

.search-inputbox{

width: 605px;

height: 40px;

line-height: 40px;

padding: 0 10px;

border:none;

background-color: #fff;

}

.search-btn{

width: 73px;

height: 40px;

line-height: 40px;

background-color:#07111b;

border:none;

font-size: 14px;

color: #fff;

text-align: center;

cursor: pointer;

}

.search-layer{

display: none;

position: absolute;

top: 100%;

left: -1px;

width: 100%;

background-color: #fff;

border:1px solid #cfd2d5;

}

.search-layer-item{

height: 24px;

line-height: 24px;

cursor: pointer;

padding: 0 10px;

}

.search-layer-item:hover{

background-color: #f3f5f7;

}

/*cart*/

.cart-name:after,.cart-logo,.cart-name,.cart-num,.cart-arrow{

color: #fff;

}

.cart{

margin-left:49px;

position: relative;

}

.cart-btn{

height: 14px;

width: 140px;

background-color: #f01414;

padding: 13px 0 15px 0;

cursor: pointer;

position: relative;

text-align: center;

}

.cart-name:after{

content: '|'!important;

margin: 0 10px;

font-size: 13px;

}

.cart-layer{

position: absolute;

top: 42px;

right: 0;

width:320px;

overflow-x:auto;

background: #fff;

}

.car-layer-item{

height: 20px;

width:80px;

background: #fff;

}

.cart-btn:hover{

background: #fff;

}

.cart:hover .cart-btn{

background: #fff;

}

.cart-active .cart-logo,

.cart-active .cart-name:after,

.cart-active .cart-name,

.cart-active .cart-num,

.cart-active .cart-arrow{

color: #f01414 ;

}

.cart-layer-title{

color:#07111b;

font-size: 12px;

height: 52px;

line-height: 52px;

padding-left: 24px;

}

.cart-layer-item,

.cart .item-total{

height: 64px;

width: 280px;

margin: 0 12px;

border-top: 1px solid #d9dde1;

}

.cart-layer-item img{

margin-top: 12px;

}

.cart .item-detail{

margin-left: 13px;

padding-top: 16px;

}

.cart .item-detail span{

display: block;

}

.cart-layer-item .item-close{

font-size: 20px;

}

.cart .dropdown-loading{

margin:30px 50px 40px 140px;

}

.cart .item-total{

line-height: 64px;

}

.cart .item-total .total-price{

margin-left: 15px;

}

.cart .item-total .gocartbtn{

height: 35px;

width: 80px;

background: #f01414;

line-height: 35px;

color: #fff;

text-align: center;

cursor: pointer;

margin-top: 15px;

border-radius: 3px;

}

/*category*/

.category{

width: 208px;

margin-top: -62px;

font-size: 14px;

position: relative;

}

.category .dropdown{

position: static;

}

.category-title{

display: block;

height: 54px;

line-height: 54px;

padding: 0 20px;

background: #c81414;

color: #fff;

}

.category-title .icon{

margin-right: 10px;

font-size: 16px;

}

.category-list{

height: 512px;

background: #f01414;

}

.category .dropdown-toggle{

height: 36px;

line-height: 36px;

padding-left: 16px;

color: #fff;

}

.category .dropdown-link{

color: #fff;

}

.category .dropdown-arrow{

position: absolute;

top: 12px;

right: 12px;

font-family: simsun;

font-weight: bold;

}

.category-active .dropdown-toggle{

background: #fff;

}

.category-active .dropdown-toggle,

.category-active .dropdown-link{

color: #f01414;

}

.category .dropdown-layer{

top: 54px;

left: 100%;

width: 744px;

min-height: 473px;

padding:8px 0 31px 0;

background:#fff;

box-shadow:0 0 5px rgba(0,0,0,0.2);

}

.category-details{

width: 744px;

margin-top: 24px;

line-height: 20px;

}

.category-details-title{

width: 84px;

padding-right: 16px;

border-right: 1px solid #d9dde1;

text-align: right;

}

.category-details-title-link{

color: #07111b;

font-weight: bold;

}

.category-details-item{

width: 592px;

padding-left: 15px;

}

.category-details-item .link{

display: inline-block;

margin-right: 16px;

}

.category .dropdown-loading{

margin: 220px auto 0;

}

(function(){

var transitionEndEventName={

transition:'transitionend',

MozTransition:'transitionend',

WebkitTransition:'webkittransitionend',

OTransition:'oTransitionend otransitionend'

};

var transitionEnd='',

isSupport=false;

for(var name in transitionEndEventName){

if (document.body.style[name]!==undefined){

transitionEnd=transitionEndEventName[name];

isSupport=true;

break;

}

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

window.mt.transition={

end:transitionEnd,

isSupport:isSupport

}

})()

(function($) {

'use strict';

var transition = window.mt.transition;

function init($elem, hiddenCallback) {

if ($elem.is(':hidden')) { //hidden

$elem.data('status', 'hidden');

if (typeof hiddenCallback === 'function') hiddenCallback();

//$elem.addClass('fadeOut');

} else { //shown

$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 silent = {

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');

})

}

};

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');

}

sildeLeftRight: {

init: function($elem) {

css3._init($elem, 'slideLeftRightCollapse');

show: function($elem) {

css3._show($elem, 'slideLeftRightCollapse');

hide: function($elem) {

css3._hide($elem, 'slideLeftRightCollapse');

}

fadeSildeUpDown: {

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');

}

fadeSildeLeftRight: {

init: function($elem) {

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);

})

}

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, {

'width': 0,

'padding-left': 0,

'padding-right': 0

});

}

fadeSildeUpDown: {

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

});

}

fadeSildeLeftRight: {

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

});

}

};

js._init = function($elem, hiddenCallback) {

$elem.removeClass('transition');

init($elem, hiddenCallback);

};

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._show = function($elem, mode) {

show($elem, function() {

$elem.stop()[mode](function() {

$elem.data('status', 'shown').trigger('shown')

});

};

js._customShow = function($elem) {

show($elem, function() {

$elem.show();

$elem.stop().animate($elem.data('styles'), 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')

});

};

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;

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 = silent;

}

mode.init($elem);

return {

show:$.proxy(mode.show,this,$elem),

hide:$.proxy(mode.hide,this,$elem)

};

}

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

//window.mt.showHide=showHide;

$.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]();

}

});

}

});

(function($) {

'use strict';

var transition = window.mt.transition;

var init = function($elem) {

this.$elem = $elem;

this.curX = parseFloat(this.$elem.css('left'));

this.curY = parseFloat(this.$elem.css('top'));

};

var to = function(x, y, callback) {

x = (typeof x === 'number') ? x : this.curX;

y = (typeof y === 'number') ? y : this.curY;

if (this.curX === x && this.curY === y) return;

this.$elem.trigger('move', [this.$elem]);

if (typeof callback === 'function') {

callback();

}

this.curX = x;

this.curY = y;

};

var Silent = function($elem) {

init.call(this, $elem);

this.$elem.removeClass('transition');

};

Silent.prototype.to = function(x, y) {

var self = this;

to.call(this, x, y, function() {

self.$elem.css({

left: x,

top: y

});

self.$elem.trigger('moved', [self.$elem]);

});

};

Silent.prototype.x = function(x) {

this.to(x);

};

Silent.prototype.y = function(y) {

this.to(null, y);

};

var Css3 = function($elem) {

init.call(this, $elem);

this.$elem.addClass('transition');

this.$elem.css({

left: this.curX,

top: this.curY

})

};

Css3.prototype.to = function(x, y) {

var self = this;

to.call(this, x, y, function() {

self.$elem.off(transition.end).one(transition.end, function() {

self.$elem.trigger('moved', [self.$elem]);

});

self.$elem.css({

left: x,

top: y

});

};

Css3.prototype.x = function(x) {

this.to(x);

};

Css3.prototype.y = function(y) {

this.to(null, y);

};

var Js = function($elem) {

init.call(this, $elem);

this.$elem.removeClass('transition');

};

Js.prototype.to = function(x, y) {

var self = this;

to.call(this, x, y, function() {

self.$elem.stop().animate({

left: x,

top: y

}, function() {

self.$elem.trigger('moved', [self.$elem]);

});

};

Js.prototype.x = function(x) {

this.to(x);

};

Js.prototype.y = function(y) {

this.to(null, y);

};

/*var $box = $('#box'),

$goBtn = $('#go-btn'),

$backBtn = $('#back-btn'),

move = new Js($box);

$box.on('move moved', function(e, $elem) {

console.log(e.type);

//console.log($elem);

})

$goBtn.on('click', function() {

//move.to(100, 50);

move.x(100);

});

$backBtn.on('click', function() {

//move.to(0, 20);

move.x(0);

})*/

var defaluts={

css3:false,

js:false

};

var move = function($elem,options){

var mode=null;

if (options.css3 && transition.isSupport){

mode= new Css3($elem);

}else if(options.js){

mode=new Js($elem);

}else{

mode=new Silent($elem);

}

return{

to:$.proxy(mode.to,mode),

x:$.proxy(mode.x,mode),

y:$.proxy(mode.y,mode)

}

};

$.fn.extend({

move: function(option,x,y) {

return this.each(function(){

var $this=$(this),

mode=$this.data('move'),

options=$.extend({},defaluts,typeof option==='object' && option);

if (!mode) {

$this.data('move',mode=move($this,options));

}

if (typeof mode[option]==='function') {

mode[option](x,y);

}

});

}

});

})(jQuery)

})(jQuery);

(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.itemNum = this.$items.length;

this.curIndex = this._getCorrectIndex(this.options.activeIndex);

this._init();

}

Slider.DEFAULTS = {

css3: false,

js: false,

animation: 'fade', // slide

activeIndex: 0,

interval: 0

};

Slider.prototype._init = function() {

var self = this;

this.$elem.trigger('slider-show',[this.curIndex,this.$items[this.curIndex]]);

// init show

this.$indicators.removeClass('slider-indicator-active');

this.$indicators.eq(this.curIndex).addClass('slider-indicator-active');

this.$elem.trigger('slider-show',[this.curIndex,this.$items[this.curIndex]]);

// to

if (this.options.animation === 'slide') {

this.$elem.addClass('slider-slide');

this.$items.eq(this.curIndex).css('left', 0);

// send message

this.$items.on('move moved', function (e) {

var index = self.$items.index(this);

if (e.type === 'move') {

if (index === self.curIndex) {

self.$elem.trigger('slider-hide', [index, this]);

} else {

self.$elem.trigger('slider-show', [index, this]);

}

} else { // moved

if (index === self.curIndex) { // 指定的

self.$elem.trigger('slider-shown', [index, this]);

} else {

self.$elem.trigger('slider-hidden', [index, this]);

}

});

// move init

this.$items.move(this.options);

this.to = this._slide;

this.itemWidth = this.$items.eq(0).width();

this.transitionClass = this.$items.eq(0).hasClass('transition') ? 'transition' : '';

} else { // fade

this.$elem.addClass('slider-fade');

this.$items.eq(this.curIndex).show();

// send message

this.$items.on('show shown hide hidden', function (e) {

self.$elem.trigger('slider-' + e.type, [self.$items.index(this), this]);

});

// showHide init

this.$items.showHide(this.options);

this.to = this._fade;

}

// bind event

this.$elem

.hover(function () {

self.$controls.show();

}, function () {

self.$controls.hide();

})

.on('click', '.slider-control-left', function () {

self.to(self._getCorrectIndex(self.curIndex - 1), 1);

})

.on('click', '.slider-control-right', function () {

self.to(self._getCorrectIndex(self.curIndex + 1), -1);

})

.on('click', '.slider-indicator', function () {

self.to(self._getCorrectIndex(self.$indicators.index(this)));

});

// auto

if (this.options.interval && !isNaN(Number(this.options.interval))) {

this.$elem.hover($.proxy(this.pause, this), $.proxy(this.auto, this));

this.auto();

}

};

Slider.prototype._getCorrectIndex = function(index) {

if (isNaN(Number(index))) return 0;

if (index < 0) return this.itemNum - 1;

if (index > this.itemNum - 1) return 0;

return index;

};

Slider.prototype._activateIndicators = function(index) {

this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active');

this.$indicators.eq(index).addClass('slider-indicator-active');

};

Slider.prototype._fade = function(index) {

if (this.curIndex === index) return;

this.$items.eq(this.curIndex).showHide('hide');

this.$items.eq(index).showHide('show');

this._activateIndicators(index);

this.curIndex = index;

};

Slider.prototype._slide = function(index, direction) {

if (this.curIndex === index) return;

var self = this;

// 确定滑入滑出的方向

if (!direction) { // click indicators

if (this.curIndex < index) {

direction = -1;

} else if (this.curIndex > index) {

direction = 1;

}

// 设置指定滑入幻灯片的初始位置

this.$items.eq(index).removeClass(this.transitionClass).css('left', -1 * direction * this.itemWidth);

// 当前幻灯片滑出可视区域，指定幻灯片滑入可视区域

setTimeout(function () {

self.$items.eq(self.curIndex).move('x', direction * self.itemWidth);

self.$items.eq(index).addClass(self.transitionClass).move('x', 0);

self.curIndex = index;

}, 20);

// 激活indicator

this._activateIndicators(index);

};

Slider.prototype.auto = function() {

var self = this;

this.intervalId = setInterval(function () {

self.to(self._getCorrectIndex(self.curIndex + 1), -1);

}, this.options.interval);

};

Slider.prototype.pause = function() {

clearInterval(this.intervalId);

};

$.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) { // first time

$this.data('slider', slider = new Slider($this, options));

}

if (typeof slider[option] === 'function') {

slider[option]();

}

});

}

})

})(jQuery);

写回答

1回答

好帮手慕言

2019-12-31

同学你好，问题在slider文件里。第一张图片触发了两次，导致最后一张不能加载。

建议：去掉一个就可以了。如下：

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0 学习 · 14456 问题

查看课程

相似问题

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

回答 1

图片只能加载到第二张（且循环了四次）

回答 3

老师有点理解不了

回答 2

今日推荐商品图片加载不出来

回答 2

老师为什么我的这个.category .drop-laye会加载loading图片呢？

回答 1

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