我想设置轮播图的宽度占据页面的两边，为什么只有第一张图片能沾满页面的两边，其他图片就不能，设置了width：100%
问题遇到的现象和发生背景
我想像第一张图片一样图片占据整个页面，但是设置了width：100% 只有第一张图片实现了下过，下面的几张图片就没有占据页面两边
这是我源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>峨眉山旅游网</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
}
.tupian .imgs img{
width: 100%;
}
.tupian .imgs li:nth-child(2),.tupian .imgs li:nth-child(3),.tupian .imgs li:nth-child(4),.tupian .imgs li:nth-child(5){
position: absolute;
top: 0;
left: 0;
}
.tupian{
position: relative;
}
.tupian .focus{
position: absolute;
display: flex;
/* 焦点平移到右下角 */
bottom: 6px;
left: 50%;
margin-left: -36px;
}
.tupian .focus li{
width: 20px;
height: 20px;
background: deeppink;
border-radius: 50%;
margin: 3px;
}
.imgs li{
transition: all 500ms;
}
</style>
</head>
<body>
<div class="big">
<div class="tupian">
<ul class="imgs">
<li><img src="轮播图图片/2.jpg" ></li>
<li><img src="轮播图图片/1.jpg" ></li>
<li><img src="轮播图图片/3.jpg" ></li>
<li><img src="轮播图图片/4.jpg" ></li>
<li><img src="轮播图图片/5.jpg" ></li>
</ul>
<ul class="focus">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
let imgs=document.querySelectorAll('.tupian .imgs li');
let focus=document.querySelectorAll('.tupian .focus li');
function show(i){
imgs.forEach(function(xue,index){
xue.style.opacity=0;
// 点点还原
focus[index].style.background='#fff'
})
imgs[i].style.opacity=1;
focus[i].style.background='#f40'
}
show(0)
// 加定时轮播
let k=0;
let set=setInterval(every,3000);
function every(){
k++;
if(k>4){k=0;}
show(k);
}
// 鼠标事件 经过 暂停，鼠标离开 继续轮播
focus.forEach(function(dian,index){
dian.onmouseenter=function(){
clearInterval(set); // 清除定时器，不再播放
k=index;
show(k);
}
dian.onmouseleave=function(){
set=setInterval(every,3000)
}
})
</script>
</html>
试过了，可以，有用希望采纳一下
.tupian .imgs img,
.tupian .imgs li {
width: 100%;
}
img,
li {
width: 100%;
height: 100%;
}
这样就可以啦
是不是你的图片没那么大啊，给图片设置个 百分比
宽度设置百分之百
.tupian .imgs li:nth-child(2),
.tupian .imgs li:nth-child(3),
.tupian .imgs li:nth-child(4),
.tupian .imgs li:nth-child(5) {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
添加width属性试试。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>峨眉山旅游网</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
}
.tupian .imgs img{
width: 100%;
}
.tupian .imgs li:nth-child(2),.tupian .imgs li:nth-child(3),.tupian .imgs li:nth-child(4),.tupian .imgs li:nth-child(5){
position: absolute;
top: 0;
left: 0;
width:100%;
}
.tupian{
position: relative;
}
.tupian .focus{
position: absolute;
display: flex;
/* 焦点平移到右下角 */
bottom: 6px;
left: 50%;
margin-left: -36px;
}
.tupian .focus li{
width: 20px;
height: 20px;
background: deeppink;
border-radius: 50%;
margin: 3px;
}
.imgs li{
transition: all 500ms;
}
</style>
</head>
<body>
<div class="big">
<div class="tupian">
<ul class="imgs">
<li><img src="轮播图图片/2.jpg" ></li>
<li><img src="轮播图图片/1.jpg" ></li>
<li><img src="轮播图图片/3.jpg" ></li>
<li><img src="轮播图图片/4.jpg" ></li>
<li><img src="轮播图图片/5.jpg" ></li>
</ul>
<ul class="focus">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
let imgs=document.querySelectorAll('.tupian .imgs li');
let focus=document.querySelectorAll('.tupian .focus li');
function show(i){
imgs.forEach(function(xue,index){
xue.style.opacity=0;
// 点点还原
focus[index].style.background='#fff'
})
imgs[i].style.opacity=1;
focus[i].style.background='#f40'
}
show(0)
// 加定时轮播
let k=0;
let set=setInterval(every,3000);
function every(){
k++;
if(k>4){k=0;}
show(k);
}
// 鼠标事件 经过 暂停，鼠标离开 继续轮播
focus.forEach(function(dian,index){
dian.onmouseenter=function(){
clearInterval(set); // 清除定时器，不再播放
k=index;
show(k);
}
dian.onmouseleave=function(){
set=setInterval(every,3000)
}
})
</script>
</html>