图片轮播问题

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

图片轮播问题

来源：5-8 首页.UI组件-UiSlider（3）

慕斯9523191

2020-10-22 11:27:21

具体遇到的问题

从第三张图片滚到第一章时出现图片无法显示的问题

报错信息的截图

尝试过的解决思路和结果

粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码
<!DOCTYPE html>
<html>
<head>
	<title>a</title>
	<meta charset="utf-8">
	<script src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script>
	<style type="text/css">
	.banner-slider{
	float: left;
	width: 544px;
	height: 414px;
	background-color: #8edff3;
}
.ui-slider{
	width: 544px;
	height: 414px;
	position: relative;
	overflow: hidden;
}
.ui-slider-wrap{
	width: 99999px;
	height: 414px;
	position: absolute;
	left: 0;
	right: 0;
	transition: all .5s;
}
.ui-slider-wrap .item{
	display: block;
	float: left;
	width: 544px;
	height: 414px;
}

.ui-slider-arrow{
	width: 544px;
	height: 40px;
	position: absolute;
	top: 50%;
	margin-top: -20px;
}
.ui-slider-arrow .item{
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	background: url(img/ui-slider-arrow.png) no-repeat;
}
.ui-slider-arrow .left{
	left: 0;
}
.ui-slider-arrow .right{
	right: 0;
	background-position: -40px 0;
}
.ui-slider-process{
	width: 544px;
	height: 12px;
	text-align: center;
	position: absolute;
	left: 0;
	bottom: 20px;
}
.ui-slider-process .item{
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,
.ui-slider-process .item:hover{
	background-position: -23px 0;
}
	</style>
</head>
<body>
<div class="banner-slider ui-slider">
            <div class="ui-slider-wrap">
                <a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>
                <a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a>
                <a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a>
            </div>
            <div class="ui-slider-arrow">
                <a href="#l" class="item left">&nbsp;</a>
                <a href="#r" class="item right">&nbsp;</a>
            </div>
            <div class="ui-slider-process">
                <a href="#0" class="item item_focus">&nbsp;</a>
                <a href="#1" class="item item">&nbsp;</a>
                <a href="#2" class="item item">&nbsp;</a>
            </div>
        </div>
<script type="text/javascript">
	//定义翻页
	$.fn.UiSlider =function(){
		var ui=$(this),
		wrap=$('.ui-slider-wrap'),
		left=$('.ui-slider-arrow .left',ui),
		right=$('.ui-slider-arrow .right',ui),
		items=$('.ui-slider-wrap .item',ui),
	 	tips=$('.ui-slider-process .item',ui);
	 	// 预定义
	 	var current=0;
	 	var size=items.size();
	 	var width=items.eq(0).width();
	 	var enableAuto=true;
	 	// 具体操作
	 	ui.on('mouseenter',function(){
	 		enableAuto=false;
	 	});
	 	ui.on('mouseleave',function(){
	 		enableAuto=true;
	 	});
	 	// 具体操作
	 	wrap.on('move_prv',function(){
	 		if(current<=0){
			current = size;
		}
		current = current - 1 ;
		wrap.triggerHandler('move_to',current);
	 	});
	 	wrap.on('move_next',function(){
	 		if(current>=size){
	 			current=0;
	 		}
	 		current+=1;
	 		wrap.triggerHandler('move_to',current);
	 	});
	 	wrap.on('move_to',function(event,index){
	 		wrap.css('left',index*width*-1);
	 		tips.removeClass('item_focus').eq(index).addClass('item_focus');
	 	});
	 	wrap.on('auto_move',function(){
	 		setInterval(function(){
			enableAuto && wrap.triggerHandler('move_next');
		},2000);
	 	});
	 	wrap.triggerHandler('auto_move');
	 	// 事件
	 	left.on('click',function(){
	 		wrap.triggerHandler('move_prv')
	 	});
	 	right.on('click',function(){
	 		wrap.triggerHandler('move_next')
	 	});
	 	tips.on('click',function(){
	 		var index=$(this).index();
	 		current = index;
	 		wrap.triggerHandler('move_to',index)
	 	});
	};
	//脚本逻辑
$(function () {
	$('.ui-slider').UiSlider();
	})
</script>
</body>
</html>

写回答

1回答