我正在尝试创建幻灯片项目
用户可以滚动幻灯片内容，当它们向下滚动时，之前的幻灯片内容将隐藏在幻灯片图像后面（此部分已完成）
但是，当用户点击顶部的幻灯片图片时，我希望我的slide-content-containter跳转对应幻灯片内容。
例如，如果用户点击slide2，我希望在我的4张幻灯片图片下看到slide2内容，slide1内容将自动滚动到顶部并隐藏在4张幻灯片图片后面
我开始编写脚本，但不确定如何从那里开始。谁能帮我吗？我真的很感激！
答案 0 :(得分：0)
Ids必须是独一无二的！你多次使用相同的ID。
答案 1 :(得分：0)
试试这段代码，
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
</script>
<script>
$(document).ready(function () {
$('.slide').on('click', function (e) {
e.preventDefault();
var id = $(this).attr("id");
goToByScroll(id);
})
function goToByScroll(id) {
id = id + "Detail";
var TopPosition = $("#" + id).position().top;
$("#slide-content-container").animate({ scrollTop: TopPosition });
}
});
</script>
<style>
#slide-list-container
{
float: left;
width: 100%;
overflow: hidden;
margin-top: 10px;
}
#slide-content-container
{
width: 680px;
height: 865px;
float: left;
overflow: auto;
background-color: white;
}
</style>
</head>
<body>
<div id='slide-list-container'>
<a id='slide1' class='slide' href='#slide1-details'>
<img src='http://i39.tinypic.com/1zfsnrb.jpg' />
</a><a id='slide2' class='slide' href='#slide1-details'>
<img src='http://i39.tinypic.com/1zfsnrb.jpg' />
</a><a id='slide3' class='slide' href='#slide1-details'>
<img src='http://i39.tinypic.com/1zfsnrb.jpg' />
</a><a id='slide4' class='slide' href='#slide1-details'>
<img src='http://i39.tinypic.com/1zfsnrb.jpg' />
</a>
</div>
<div id='slide-content-container'>
<div id='slide1Detail'>
<h1>
Slide1</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas
nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
eget bibendum sodales, augue velit cursus nunc,</div>
<div id='slide2Detail'>
<h1>
Slide2</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas
nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
eget bibendum sodales, augue velit cursus nunc,</div>
<div id='slide3Detail'>
<h1>
Slide3</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas
nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
eget bibendum sodales, augue velit cursus nunc,</div>
<div id='slide4Detail'>
<h1>
Slide4</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas
nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
eget bibendum sodales, augue velit cursus nunc,</div>
</div>
</body>
</html>