论坛
标题:
关于轮播图
[打印本页]
作者:
fjw8168
时间:
2018-3-26 20:59
标题:
关于轮播图
<!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
li没有并排，在滚动的过程中下一个li跳行了，只有滚动到位置了才显示上来，所以才看到的白的，把ul设置一个1000px宽度就行了。
作者:
fjw8168
时间:
2018-3-31 13:53
lori棒棒糖 发表于 2018-3-29 17:56
li没有并排，在滚动的过程中下一个li跳行了，只有滚动到位置了才显示上来，所以才看到的白的，把ul设置一个 ...
嗯，果然是这样，谢了
欢迎光临 论坛 (http://bbs.qinxue.com/)
Powered by Discuz! X3.1
