js实现焦点图

最新推荐文章于 2024-06-27 20:30:00 发布

FuTzy

最新推荐文章于 2024-06-27 20:30:00 发布

阅读量466

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_41609957/article/details/94578393

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先把要注意的点写出来。。

定义了position：relative或absolute属性的元素才有left属性,属性都有offsetLeft属性
style.left方法必须定义内联样式才能获取值。
style.left可读可写但获取的值为字符型。
offsetLeft可直接通过obj.offsetLeft获取。
offsetLeft只可以读取值不可以赋值，且值为数值型。

定义的css样式

注：left必须写在内联样式中才能用obj.style.left获取值，（未定义在内联央式就用obj.offsetLeft来获取）

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            height:400px;
            width:600px;
            position: relative;
            overflow: hidden;
            margin: 100px auto ;
            /*boder: 10px solid black;*/
            box-shadow: 0 0 5px green;//阴影
        }
        .wrap{
            height:400px;
            width:400%;
            position: absolute;
            z-index:1;

        }
        .wrap img{
            float:left;
            width:600px;
            height:400px;
        }
        .container .buttons{
            position: absolute;
            right:45%;
            bottom: 20px;
            z-index:2;
        }
        .container .buttons span {
            margin-left: 5px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: green;
            text-align: center;
            color:white;
            cursor: pointer;
        }
        .container .buttons span.on{
            background-color: red;
        }
        .container .arrow {
            position: absolute;
            top: 35%;
            color: green;
            padding:0px 14px;
            border-radius: 50%;
            font-size: 50px;
            z-index: 15;
            display: none;
        }
        .container .arrow_left {
            left: 10px;
        }
        .container .arrow_right {
            right: 10px;
        }
        .container:hover .arrow {
            display: block;
        }
        .container .arrow:hover {
            background-color: rgba(0,0,0,0.2);
        }

    </style>

<body>
<div class="container">
    <div class="wrap" style="left:0px;">
        <img src= img/41.jpg alt="">
        <img src="img/42.jpg" alt="">
        <img src="img/43.jpg" alt="">
        <img src="img/44.jpg" alt="">
    </div>
    <div class="buttons">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <!--<span></span>-->
    </div>
    <a href="javascript:;" onclick="next_pic()" class="arrow arrow_left">&lt;</a>
    <a href="javascript:;" onclick="prev_pic()"class="arrow arrow_right">&gt;</a>
</div>

<script>

    var wrap = document.querySelector(".wrap");
//    console.log(wrap.style.left);
    var left1 = document.querySelector(".arrow_left");
    var right1 = document.querySelector(".arrow_right");
    function prev_pic () {
        var newLeft;
//      console.log(wrap.offsetLeft)

        if(wrap.offsetLeft===-1800){
            newLeft = 0;
        }else{
//          newLeft = parseInt(wrap.style.left)-600; //style.left方法输出为字符串，需要转换
			newLeft = wrap.offsetLeft-600;
        }
        wrap.style.left = newLeft + "px";
    }
    function next_pic () {
        var newLeft;
        if(wrap.style.left === "0px"){
            newLeft = -1800;
        }else{
            newLeft = parseInt(wrap.style.left)+600;
        }
        wrap.style.left = newLeft + "px";
    }

    var timer = null;
    function autoPlay () {
        timer = setInterval(function () {
            //next_pic();
            prev_pic();
        },3000);
    }
 autoPlay();
</script>