欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS 轮播图

程序员文章站 2024-01-06 21:15:04
JS轮播图 ......

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>




上一篇： Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】

下一篇： ubutu安装wordpress后无法安装插件和主题问题（提示ftp权限）讲解

推荐阅读