同一个div可使用多个图片，并且在不同的位置显示做成轮播图

最新推荐文章于 2024-09-03 15:05:46 发布

weixin_34159110

最新推荐文章于 2024-09-03 15:05:46 发布

阅读量864

点赞数 1

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/newgoup/blog/490667

版权

2019独角兽企业重金招聘Python工程师标准>>>

border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
。

同一个div可使用多个图片，并且在不同的位置显示
多张图片的路径：background-image:url(1.jpg),url(2.jpg),url(3.jpg);
是否重复：background-repeat:no-repeat;
背景被裁剪到内容框：background-clip:content-box;
多张图片的大小：background-size:100px 100px,200px 200px, 300px 300px;
多张图片的绝对定位：background-position:10px 10px,60px 60px ,90px 90px;

利用图片的

div{
    width:200px;height:200px;
    background-image:url(1.jpg),url(2.jpg),url(3.jpg);
    background-repeat:no-repeat;
    background-size:100% 100%,100% 100%,100% 100%;
    background-position:0px 0px,-500px -500px,-500px -500px;
    }
<script>
window.onload=function  () {
    var div=document.getElementsByTagName("div")[0];
        var positionArr=(getStyle(div,"backgroundPosition")).split(",");
        var num=0;
    setInterval(function(){
        if(num==positionArr.length){
            num=0;
        }
        for (var i=0; i<positionArr.length; i++) {
            if(i==num){
                positionArr[i]="0 0";
            }else{
                 positionArr[i]="-500px -500px";
            }
         }
                 div.style.backgroundPosition=positionArr.join(",");
             num++
             },3000)
           }
        function getStyle (obj,attr) {
                      if(window.getComputedStyle){
                return getComputedStyle(obj,null)[attr];
              }else{
                return obj.currentStyle[attr];
              }
           }
</script>

转载于:https://my.oschina.net/newgoup/blog/490667