当前位置:首页 > 日志记录 > 临时笔记 > 正文内容

HTML5轮播图片段

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #333;
}

#container {
    width: 1920px;
    height: 800px;
    overflow: hidden;
    position: relative;
}

#list {
    overflow: hidden;
    position: absolute;
}

#list a {
    overflow: hidden;
    display: block;
    float: left;
}

#list img {
    width: 100%;
    height: 800px;
    float: left;
}

#spanlist {
    position: absolute;
    z-index: 999;
    bottom: 15px;
    left: 50%;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

#spanlist span:last-child{
    margin-right: 0px;
}
.span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    float: left;
    margin-right: 10px;
}

.span1 {
    width: 30px;
    height: 10px;
    border-radius: 10px;
    background: #fff;
    float: left;
    margin-right: 10px;
}

.spanbright {
    width: 30px;
    height: 10px;
    border-radius: 10px;
    background: #fff;
    float: left;
    margin-right: 10px;
}

.left {
    font-size: 80px;
    line-height: 80px;
    font-weight: bolder;
    z-index: 2;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -48px;
    color: rgba(255, 255, 255, 0.5);
    display:none;
}

.right {
    font-size: 80px;
    z-index: 2;
    position: absolute;
    right: 10px;
    top: 50%;
    line-height: 80px;
    height: 80px;
    margin-top: -48px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bolder;
    display:none;
}


</style>

<body>
    <div id="container" onmouseover="stop()" onmouseout="play()">
        <div id="list" >
            <a><img src="http://www.zhwkg.com/uploads/20190727/f01bada06e08517e1377ae2dc0b92af2.jpg"></a>
            <a><img src="http://www.zhwkg.com/uploads/20200727/d34b34e44d650c8393ec4332e5943c6f.jpg"></a>
            <a><img src="http://www.zhwkg.com/uploads/20190719/c99fa7cb61fd5098cc79fcd9f357c83c.jpg"></a>
        </div>
        <div id="spanlist">
        </div>
        <a href="javascript:;" id="left">
            <</a>
                <a href="javascript:;" id="right">></a>
    </div>
    <script type="text/javascript">
    function $$(id) { //获取标签的函数
        return document.getElementById(id);
    }
    </script>
    <script type="text/javascript">
    var list = $$('list');
    var listLength = $$('list').getElementsByTagName('a').length; //获取图片的数量
    var imgWidth = list.getElementsByTagName('a')[0].offsetWidth; //获取每张图片宽度
    list.style.width = listLength * imgWidth + "px"; //自动给图片列表增加宽度
    var widthAll = listLength * imgWidth + "px";

    var spanlist = $$('spanlist') //获取圆点的总标签

    for (var i = 0; i < listLength; i++) { //根据图片数量,动态添加span
        spanlist.appendChild(document.createElement("span"));
    }

    var spanlists = spanlist.getElementsByTagName('span') //获取span标签的数组
    for (var i = 0; i < listLength; i++) {
        spanlists[i].className = "span"; //遍历所有span,为每个span增加css样式
        spanlists[i].setAttribute("index", i) //为每个span标签增加下标index(0,1,2,3...图片数量-1)
    }

    spanlists[0].className = "span1"; //覆盖前面的第一个span样式

    //根据spanlist圆点的总宽度,动态调整为中间位置
    var spanlistWidth = spanlist.offsetWidth / 2; //获取spanlist的宽度并除于2
    spanlist.style.marginLeft = "-" + spanlistWidth + "px";

    //定义自动切换每次改变的left距离
    var t = 1; //当前图片序列号

    rs = setInterval('rightsmooth()', 1);//立马获取re
    clearInterval(rs) //立马清除

    function autoswitch(){
        t += 1;
        rs = setInterval('rightsmooth()', 1);
    }

    timer = setInterval('autoswitch()', 2000); //每2秒执行一次autoswitch函数


    //按钮向右过渡图片
    function rightsmooth() {
        clearInterval(rs)
        if (t>listLength) {
            list.style.cssText="transition-duration: 500ms;transition-timing-function: ease-out;transform: translatex(-"+0*imgWidth+"px);width:"+widthAll;
            t=1;
        }else{
            list.style.cssText="transition-duration: 500ms;transition-timing-function: ease-out;transform: translatex(-"+(t-1)*imgWidth+"px);width:"+widthAll;
        }

        for (var j = 0; j < spanlists.length; j++) { //每一次图片滚动,自动改变圆点标签的颜色
            spanlists[j].setAttribute('class', 'span');
        }
        spanlists[t - 1].setAttribute('class', 'spanbright');
        console.log(t)

    }
    //按钮向左过渡图片
    function leftsmooth() {
        console.log(t)
        if (t == 0) {
            list.style.cssText="transition-duration: 500ms;transition-timing-function: ease-out;transform: translatex(-"+(listLength-1)*imgWidth+"px);width:"+widthAll;
            t=listLength
        }else{
            list.style.cssText="transition-duration: 500ms;transition-timing-function: ease-out;transform: translatex(-"+(t-1)*imgWidth+"px);width:"+widthAll;
        }
        for (var j = 0; j < spanlists.length; j++) { //每一次图片滚动,自动改变圆点标签的颜色
            spanlists[j].setAttribute('class', 'span');
        }
        spanlists[t - 1].setAttribute('class', 'spanbright');
    }



    for (var i = 0; i < spanlists.length; i++) { //为每一个span标签动态添加鼠标事件
        spanlists[i].onmouseover = function() {
            for (var j = 0; j < spanlists.length; j++) { //重置所有span的样式
                spanlists[j].setAttribute('class', 'span');
            }
            var myIndex = parseInt(this.getAttribute("index")); //获取每个鼠标事件绑定的index下标的值
            spanlists[myIndex].setAttribute('class', 'spanbright'); //根据下标值改变颜色
            list.style.left = "-" + imgWidth * myIndex + "px"; //变换到指定下标对应的图片
            t = myIndex + 1; //图片序号等于对应鼠标事件的下标(由于一开始t就比下标大1,所以这里加1)
            console.log(t)
        }
    }




    document.addEventListener('visibilitychange', function() { //浏览器切换事件
        if (document.visibilityState == 'hidden') { //状态判断
            clearInterval(timer);
        } else {
            timer = setInterval('autoswitch()', 2000);
        }
    })

    function stop() {
        clearInterval(timer);
        $$('left').style.display = "block";
        $$('right').style.display = "block";
    }

    function play() {
        $$('left').style.display = "none";
        $$('right').style.display = "none";
        timer = setInterval('autoswitch()', 2000); //每2秒执行一次autoswitch函数
    }


    $$('left').onclick = function() { //鼠标点击左边按钮,图片向左
        t = t - 1;
        leftsmooth()
    }
    $$('right').onclick = function() { //鼠标点击右边按钮,图片向右
        t += 1;
        rightsmooth();
    }
    </script>
</body>

</html>
————————————————


扫描二维码推送至手机访问。

版权声明:本文由Znanr发布,如需转载请注明出处。

标签: HTML轮播图
分享给朋友:

相关文章

div加边框css

div加边框css     background-color: rgba(255, 255, 255, 1); &n...

tp5 框架使用笔记

tp5 框架使用笔记

tp5 开发流程下载源码框架 ——> 在application文件中新建对应的某块(如后台的首页admin、文章article) ——> 在application文件中对于的模块下建立co...

PS不能直接拉入图片啦!怎么办

PS不能直接拉入图片啦!怎么办

1、点进开始按钮+R,这时候会出现-运行,我们要在运行里输入“ regedit“,点击确定2、这时出现很多文件夹,找到HKHKEY_LOCAL_MACHINE–SOFTWARE–Microsoft–W...

tp5入门笔记(1)

tp5入门笔记(1)

模板引用*打开根目录config.php文件,将应用试调模式打开ture'app_debug'  => false,改成true1、将模板的js、css、images放...

 tp5 运用过程中遇到的问题

tp5 运用过程中遇到的问题

1、代码更改但是页面刷新没变化 原因:tp5自有的缓存机制解决办法:将config中的 'request_cache' =>true改成 false,删除根目类的run...

未定义数组索引: id | ThinkPHP5

未定义数组索引: id | ThinkPHP5

你可能百度了很多,在dump一下里面有数据呀!然后一顿百度有说需要设置一下$type=isset($_POST["type"])?$_POST["type"]:...