请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
效果
代码
<style>
#papa { margin: auto; width: 460px; height: 600px; overflow: hidden; white-space: nowrap; position: relative; }
#papa img { width: 460px; }
.navBtn { margin: 4px; width: 26px; height: 26px; border: 2px dotted silver; border-radius: 50%; text-align: center; line-height: 26px; font-size: 14px; cursor: pointer; display: inline-block; }
.navBtn:hover { color: red; background: silver; }
.redBorder { border-color: red; cursor: default; }
.tMid { margin: 10px; text-align: center; }
</style>
<div id="papa">
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji01.jpg" />
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji02.jpg" />
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji03.jpg" />
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji04.jpg" />
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji05.jpg" />
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji06.jpg" />
</div>
<p class="tMid">
<span class="navBtn redBorder">1</span>
<span class="navBtn">2</span>
<span class="navBtn">3</span>
<span class="navBtn">4</span>
<span class="navBtn">5</span>
<span class="navBtn">6</span>
</p>
<script>
//图片、按钮
var images = papa.querySelectorAll('img'),
btns = document.querySelectorAll('.navBtn');
//按钮点击事件
btns.forEach((btn,key) => {
btn.onclick = () => {
images[key].scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
btns.forEach((b,k) => {
b.className = k === key ? 'navBtn redBorder' : 'navBtn';
});
}
});
//滚动第一张图片
images[0].scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
</script>
|