网页实现图片滚动

卖卖123 2018-07-02 09:41:36
本人刚学网页,在网上下载了一份代码,后把图片的宽度和高度修改之后,图片只会显示第一张图片,后面的只有滚动没有图片。大神们帮忙看一下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文件</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
*{ padding:0px; margin:0px;list-style:none;}
.banner { width:1422px; height:500px; margin:100px auto; border:1px solid #808080; position:relative; overflow:hidden;}
.banner .img{width:1422px; position:absolute; left:0px;top:0px;}
.banner .img img{width:1422px; height:500px;}
.banner .img li{float:left;}
.banner .num { position:absolute; width:100%; bottom:10px; left:0px; text-align:center; font-size:0px;}
.banner .num li { width:10px; height:10px; background-color:#888; border-radius:50%;display:inline-block; margin:0px 3px; cursor:pointer;}
.banner .num li.on {background-color: #ff6a00;}
.banner .btn {width: 30px;height: 50px;background-color: #808080;opacity: 0.5; filter:alpha(opacity:0.5); position:absolute;top:50%; margin-top:-25px;
cursor:pointer;
text-align:center;
line-height:50px;
font-size:40px;
color:#fff;
font-family:"宋体";
display:none;
}
.banner .btn_l { left:0px;}
.banner .btn_r { right:0px;}
.banner:hover .btn { display:block;}
</style>
<script type="text/javascript">

$(document).ready(function () {

var i = 0;

var clone = $(".banner .img li").first().clone();//克隆第一张图片
$(".banner .img").append(clone);//复制到列表最后
var size = $(".banner .img li").size();
console.log(size);


for (var j = 0; j < size-1; j++) {
$(".banner .num").append("<li></li>");
}

$(".banner .num li").first().addClass("on");

/*自动轮播*/

var t = setInterval(function () { i++; move();},2000);

/*鼠标悬停事件*/

$(".banner").hover(function () {
clearInterval(t);//鼠标悬停时清除定时器
}, function () {
t = setInterval(function () { i++; move(); }, 2000); //鼠标移出时清除定时器
});

/*鼠标滑入原点事件*/

$(".banner .num li").hover(function () {

var index = $(this).index();//获取当前索引值
i = index;
$(".banner .img").stop().animate({ left: -index * 1422 }, 500);
$(this).addClass("on").siblings().removeClass("on");
});

/*向左按钮*/
$(".banner .btn_l").click(function () {
i++;
move();
})

/*向右按钮*/
$(".banner .btn_r").click(function () {
i--;
move();
})

/*移动事件*/
function move() {
if (i == size) {
$(".banner .img").css({ left: 0 });
i = 1;
}
if (i == -1) {
$(".banner .img").css({ left: -(size - 1) * 1422 });
i = size - 2;
}
$(".banner .img").stop().animate({ left: -i * 1422 }, 500);

if (i == size - 1) {
$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
} else {
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
}
}
});


</script>
</head>
<body>
<div class="banner">
<ul class="img">
<li><img src="https://img-bbs.csdn.net/upload/201807/02/1530495519_843956.jpg" alt=""/></li>
<li><img src="https://img-bbs.csdn.net/upload/201807/02/1530495549_595430.jpg" alt="" /></li>
<li><img src="https://img-bbs.csdn.net/upload/201807/02/1530495556_168930.jpg" alt="" /></li>
<li><img src="https://img-bbs.csdn.net/upload/201807/02/1530495563_111554.jpg" alt="" /></li>
</ul>
<ul class="num">

</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
</body>
</html>





就是这四张图片
...全文
4001 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
nihaoye000 2018-07-04
  • 打赏
  • 举报
回复
swiperjs了解一下
wz_307 2018-07-04
  • 打赏
  • 举报
回复
还有个bug:
创建导航点少了一个
for (var j = 0; j < size; j++) { // 原先是size-1
$(".banner .num").append("<li></li>");
}
wz_307 2018-07-04
  • 打赏
  • 举报
回复
之前以为只有4项, 所以*4; 5项*5就好了
.banner .img {
width: 7110px; /*size * 1422*/
}

排查过程是: 在运行动画时F12看看各个element的css属性,会发现第5个li仍然换行了,所以肯定.img的宽度不够导致的。
卖卖123 2018-07-02
  • 打赏
  • 举报
回复
引用 1 楼 wz_307 的回复:
最简单的改法
.banner .img {
width: 5688px;
}

因为ul之前设置1422的宽,导致li全部换行显示,竖向显示成了4行图片。所以向左移动的时候,显示了空白图片

这样是可以了,但是还有一个问题,就是四张图片滚动完之后,第二轮的第一张图片就又是白色的了,其他的没问题
wz_307 2018-07-02
  • 打赏
  • 举报
回复
最简单的改法
.banner .img {
width: 5688px;
}

因为ul之前设置1422的宽,导致li全部换行显示,竖向显示成了4行图片。所以向左移动的时候,显示了空白图片
NANU-NANA 2018-07-02
  • 打赏
  • 举报
回复
用现成的framework

87,937

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧