关于轮播图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
.a{width: 200px; height: 175px; margin: 100px auto;border: 1px #555 solid;overflow: hidden;position: relative;}
ul{position: absolute;top:0;left:0;transition: 0.7s;}
ul li{width: 200px;height: 150px;;float: left;color: #fff;text-align: center;line-height: 150px;font-size: 50px;}
dl{position: absolute;bottom: 0;left: 50%;margin-left: -100px;}
dl li{width: 40px;height: 25px;background: #ccc;float: left;text-align: center;line-height: 25px;}
dl li:hover{background: #57C7C2;}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){

$("dl li").mouseover(function(){
var idx=$(this).index();
var ib=200;
$("ul").css("left",-idx*ib);
})
})
</script>
</head>

<body>
<div class="a">

<ul>
<li style="background:#3BCF6C">1</li>
<li style="background:#E85C5F">2</li>
<li style="background:#7537D9">3</li>
<li style="background:#DDA324">4</li>
<li style="background:#E02BCE">5</li>
</ul>

<dl>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</dl>

</div>

</body>
</html>

韩老师，你好，上面这个轮播图，按我的思路当鼠标移入到12345时，上面的图片应该会一个接一个的移动，但不知为何中间会出现空白呢？

lori棒棒糖 · 发表于 2018-3-29 17:56:48

li没有并排，在滚动的过程中下一个li跳行了，只有滚动到位置了才显示上来，所以才看到的白的，把ul设置一个1000px宽度就行了。

fjw8168 · 发表于 2018-3-31 13:53:48

lori棒棒糖发表于 2018-3-29 17:56
li没有并排，在滚动的过程中下一个li跳行了，只有滚动到位置了才显示上来，所以才看到的白的，把ul设置一个 ...

嗯，果然是这样，谢了

[提问] 关于轮播图

共2个回复最后回复于 2018-3-31 13:53

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[提问] 关于轮播图

共2个回复 最后回复于 2018-3-31 13:53

共2个回复最后回复于 2018-3-31 13:53