< >

automatik-background-image-slider-falsche-css.php


Quell Code


<html><head> 
<title>Welcome!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> 
    *{margin:0px; padding:0px;height: 100%;top:0px;left:0px;right:0px;bottom:0px; }     
</style>  
</head> 
<body lang="DE" style="
    margin:0px; padding:0px; border:none; outline: none;
    background-color:rgba(16,32,128,0.1);
    overflow: hidden;
    .SlideBox {height:100%; width:100%; vertical-align: middle; background-color:rgba(16,32,128,0.1); background-repeat:no-repeat;}
    .img {object-fit: cover;background-size: cover;display: block; margin:0 auto;} 
">
<div class="SlideBox">
</div>
<script>
var myIndex = 0;
var timer;
  carousel();
timer=setInterval(carousel, 7000);
var bod=document.getElementsByTagName('body')[0];
bod.addEventListener('mousedown',function(){
    clearInterval(timer);
      carousel();
})
bod.addEventListener('mouseup',function(){
      timer=setInterval(carousel, 7000);
})
function carousel() {
  
  
    var  x=['http://sebastian1012.bplaced.net/loesungen/semiar/test2.png','http://sebastian1012.bplaced.net/bilder/2.jpg','http://sebastian1012.bplaced.net/bilder/3.jpg','http://sebastian1012.bplaced.net/bilder/4.jpg','http://sebastian1012.bplaced.net/bilder/5.jpg','http://sebastian1012.bplaced.net/bilder/6.jpg','http://sebastian1012.bplaced.net/bilder/7.jpg'];
  

  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  var box=document.getElementsByClassName("SlideBox")[0];
  box.style.background='url('+x[myIndex-1]+')';
  box.style.backgroundSize='contain';
  box.style.backgroundPosition:center center;
  box.style.backgroundRepeat='no-repeat';
}
</script>
</body>
</html>