js实现焦点图

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

  1. 定义了position:relative或absolute属性的元素才有left属性,属性都有offsetLeft属性
  2. style.left方法必须定义内联样式才能获取值。
  3. style.left可读可写但获取的值为字符型。
  4. offsetLeft可直接通过obj.offsetLeft获取。
  5. 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>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值