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

上次写完腾讯首页的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 href="#"><img src="ex.png"></a>    </div>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>    </ul></div>

样式如下

//最外层，设置其宽高，这样就可以保证只显示一个banner#rollWrap{    overflow: hidden;    width: 600px;    height: 193px;    margin-bottom: 30px;    //设置为相对定位，因为slider要设置为绝对定位以脱离文档流    position: relative; }//为什么slider要设置绝对定位呢？这是因为由于我们要通过设置slider的top属性来实现变换图片。//没有设置top是为了首先播放第一张banner#slider{    position: absolute;}//slider内的图片全部向左浮动，由于父元素的宽不够，因此所有图片会垂直排列并无缝隙对齐#slider img{    float: left;}#rollWrap ul {    display: inline-block;    position: relative;    top: 164px;    left: 512px}//为数字列表设置样式#rollWrap ul li{    float: left;    display: inline-block;    width: 14px;    height: 14px;    background-color: white;    opacity: 0.9;    text-align: center;    font-size: 4px;    border-radius: 3px;    margin-right: 6px;}

两张图片紧连着的同时又不会遮盖其他部分内容，这就是结合position:absolute;和float:left;的原因。

---

JS实现轮流播放

在< body>标签的最底部引用外部js文件

<script type="text/javascript" src="slider.js"></script>

js代码如下

window.onload = function () {    //flag用于标识图片现在播放的位置    flag = 0;    slider = document.getElementById('slider');    wrap = document.getElementById('rollWrap');    list = wrap.getElementsByTagName('li');    //一开始，默认播放第一个banner    list[0].style.backgroundColor = "#666666";    //开始轮播，每5秒执行一次turn函数    time = setInterval("turn();", 5000);    //实现鼠标悬停在banner上时停留和从banner离开时继续轮播    slider.onmouseover = function() {        clearInterval(time);    }    slider.onmouseout = function () {        time = setInterval("turn();", 5000);    }    //实现鼠标悬停在每个li上都跳转到对应banner并长时间停留，离开则继续轮播    for(var i = 0; i < list.length; i++) {        list[i].onmouseover = function () {            clearInterval(time);            turn(this.innerHTML);            console.log("innerHTML", this.innerHTML);        }        list[i].onmouseout = function () {            time = setInterval("turn()", 5000);        }    }}//变换函数function turn(value) {    if(value != null) {        //当value=1时（鼠标悬停在1处），flag应该为0，由于后面还要自增flag，所以这里减去2        //或者先自增再减也可以        flag = value - 2;    }    if(flag < list.length - 1) {        flag++;    } else {        flag = 0;    }    //改变slider的top值达到改变banner的目的    slider.style.top = flag * (-195) + "px";    //选中的banner对应得li也要改变颜色    for(var i = 0; i < list.length; i++) {        list[i].style.backgroundColor = "#ffffff";    }    list[flag].style.backgroundColor = "#666666";}

---

效果

原图

实现图