HTML+CSS+JS：临摹腾讯软件中心首页——轮流播放图片

带刀预言家

于 2017-03-02 11:22:53 发布

阅读量1.5k

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_31628337/article/details/59484971

版权

本文介绍了如何使用HTML、CSS和JavaScript实现腾讯软件中心首页的轮流播放图片功能。通过分析CSS布局，创建HTML结构，并编写JS代码控制图片轮播，实现了点击数字列表切换及鼠标悬停暂停的效果。

摘要由CSDN通过智能技术生成

上次写完腾讯首页的HTML+CSS，在首页，有一个轮流播放banner的地方，在上次由于是先写布局所以就暂时搁置了。
现在来实现~

观察CSS

这里写图片描述
1.可以看到，播放时候的banner的宽和高都是一样的。
2.轮流播放，1到2到3到4再到1。
3.若鼠标悬停在某一个数字上，就会显示相应的banner并长时间停留在该banner上。
4.我认为鼠标若悬停在banner上，应该长时间停止在该banner上，但是腾讯软件中心似乎没有这样做。

HTML+CSS

首先实现布局
该布局可以看到应该由两个部分组成：放置banner和放置显示的数字列表。
因此我使用了一个div包裹住这两个部分

<div id="rollWrap">
    <div id="slider">
        <a href="#"><img src="exhibit.png"></a>
        <a href="#"><img src="exhibit2.png"></a>
        <a href="#"><img src="exhibit3.png"></a>
        <a