当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS 轮播图

JS 轮播图

2019年12月16日  | 移动技术网IT编程  | 我要评论

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" onclick="previous()">&lt;</span></li>
        <li><span style="float: right" onclick="next()">&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) {
        // 清除所有圆点的背景色
        clearlibc();
        switch (index) {
            case 1:
                div_img.style.backgroundimage = img1;
                // 只给当前图片对应的圆点设置背景色
                li_dot[0].style.backgroundcolor = "darkseagreen";
                break;
            case 2:
                div_img.style.backgroundimage = img2;
                li_dot[1].style.backgroundcolor = "darkseagreen";
                break;
            case 3:
                div_img.style.backgroundimage = img3;
                li_dot[2].style.backgroundcolor = "darkseagreen";
                break;
            case 4:
                div_img.style.backgroundimage = img4;
                li_dot[3].style.backgroundcolor = "darkseagreen";
                break;
        }
    }

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




您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网