A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

JS轮播图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS轮播图</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    #center {
        width: 800px;
        height: 600px;
        margin: auto;
        background-color: black;
        background-image: url("http://imgsrc.baidu.com/forum/pic/item/9e3df8dcd100baa1436c441e4710b912c9fc2ed6.jpg");
    }
    /*左右箭头*/
    #ul1 {
        position: relative;
        top: 40%;
    }
    #ul1 li {
        font-size: 80px;
        color: white;
    }
    /*四个点*/
    #ul2 {
        position: relative;
        top: 92%;
    }
    #ul2 li {
        width: 20px;
        height: 20px;
        border: 3px slateblue solid;
        /*透明度*/
        opacity: 0.7;
        /*将li的边框设置为圆*/
        border-radius: 50%;
        float: left;
        margin-left: 10px;
        position: relative;
        left: 30%;
    }
    #ul1 li:hover {
        color: aqua;
    }
    #ul2 li:hover {
        background-color: darkseagreen;
    }
</style>
<body>
<div id="center">
    <ul id="ul1">
        <!--绑定单击事件的方法,上下翻图-->
        <li><span style="float:left">&lt;</span></li>
        <li><span style="float: right">&gt;</span></li>
    </ul>
    <ul id="ul2">
        <li class="li_dot" style="background-color: darkseagreen;"></li>
        <li class="li_dot"></li>
        <li class="li_dot"></li>
        <li class="li_dot"></li>
    </ul>
</div>
<script type="text/javascript">
    img1 = "url('http://imgsrc.baidu.com/forum/pic/item/9e3df8dcd100baa1436c441e4710b912c9fc2ed6.jpg')";
    img2 = "url('http://www.datongchun.com/upload/image/20150817101824_89175.jpg')";
    img3 = "url('http://img2.imgtn.bdimg.com/it/u=1563165482,1097507544&fm=214&gp=0.jpg')";
    img4 = "url('http://hiphotos.baidu.com/%D4%C6%C8%B8%B5%C4%B3%E7%B0%DD%D5%DF/pic/item/c6ba270b9a23e670e9248891.jpg')";
    // 定时器,每两秒播放一次
    setInterval(next,2000);
    // 计算图片索引
    var count = 1;
    //获取圆点
    var li_dot = document.getElementsByClassName("li_dot");
    //鼠标悬停在对应圆点时,显示对应的图片
    li_dot[0].onmouseenter = function () {count=1;show(count)};
    li_dot[1].onmouseenter = function () {count=2;show(count)};
    li_dot[2].onmouseenter = function () {count=3;show(count)};
    li_dot[3].onmouseenter = function () {count=4;show(count)};
    //获取图片div
    var div_img = document.getElementById("center");
    //下一张
    function next() {
        count += 1;
        if (count > 4) {
            count = 1;
        }
        show(count);
    }
    // 上一张
    function previous() {
        count -= 1;
        if (count < 1) {
            count = 4
        }
        show(count);
    }
    //清除所有圆点的背景颜色
    function clearLiBC() {
        for(i=0;i<=3;i++){
            //背景颜色透明
            li_dot[i].style.backgroundColor="transparent";
        }
    }
    // 显示对应索引的图
    function show(index) {
        switch (index) {
            case 1:
                div_img.style.backgroundImage = img1;
                // 清除所有圆点的背景色
                clearLiBC();
                // 只给当前图片对应的圆点设置背景色
                li_dot[0].style.backgroundColor = "darkseagreen";
                break;
            case 2:
                div_img.style.backgroundImage = img2;
                clearLiBC();
                li_dot[1].style.backgroundColor = "darkseagreen";
                break;
            case 3:
                div_img.style.backgroundImage = img3;
                clearLiBC();
                li_dot[2].style.backgroundColor = "darkseagreen";
                break;
            case 4:
                div_img.style.backgroundImage = img4;
                clearLiBC();
                li_dot[3].style.backgroundColor = "darkseagreen";
                break;
        }
    }

</script>
</body>
</html>

2 个回复

倒序浏览
有问题联系学姐
DKA-2018
回复 使用道具 举报
有问题联系学姐
DKA-2018
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马