2022年 7 月 03日- (星期日) / Published in css 设计, html 设计, javascript 设计, JS 特效, 前端设计

html and css js 制作定制桌面手机演示banner效果cid1112-前端设计

 <!DOCTYPE html>
<html lang="en">
<script
  src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>mobile slider</title>
    <style>
        body{
             overflow: hidden;
            background-image:url(https://code.5g-o.com/wp-content/uploads/2020/10/67.jpeg);
            background-size: cover;
        }
        
    .dm-width {
   width: 500px;
   margin: 0 auto;
}

.iphone-mockup {
   position: relative;
   z-index: 5;
}

.dm-device {
    position: relative;
    width: 100%;
    padding-bottom:203.477897%;
    margin-bottom: 20px;
}

.device {
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-background-size: 100% 100%;
    
    background-repeat: no-repeat;
  background-image: url(apple-iphone.png);
  background-size: cover;
    background-position: center center;
}

.screen {
   overflow: hidden;
    position: absolute;
    top: 18.1%;
    bottom: 20.6%;
    left: 12.49%;
    right: 17.4%;
    background-color: #E91E63;
}

.slider {
  height: 100%;
}
.slider div {
  height: 100%;
}

.slider__item {
    font-size: 100px;
    color: rgba(255,255,255,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider__item--1 {
   background-image: url(https://code.5g-o.com/wp-content/uploads/2020/10/img-4.jpeg);
    background-size: cover;
}
.slider__item--2 {
     background-image: url(https://code.5g-o.com/wp-content/uploads/2020/10/menu.jpg);
    background-size: cover;
}
.slider__item--3 {
    background-image: url(https://code.5g-o.com/wp-content/uploads/2020/10/img-3.jpg);
    background-size: cover;
    background-position: center;
}

.slider__item--4 {
     background-image: url(pexels-photo-445109.jpeg);
    background-size: cover;
    background-position: center;
}
    
    </style>
</head>
<body>
   <div class="dm-width">
  <div class="dm-device">
    <div class="device">
      <div class="screen">
        <div class="slider">
          <div class="slider__item slider__item--1">
          
          </div>
          <div class="slider__item slider__item--2">
        
          </div>
          <div class="slider__item slider__item--3">
   
          </div>
          <div class="slider__item slider__item--4">
     
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 
<script>
    
    $('.slider').owlCarousel({
 ? ? ? ? ? ?items: 1,
 ? ? ? ? ? ?singleItem:true,
 ? ? ? ? ? ?nav: true,
            dots: false,
            loop: true,
            autoPlay: 3000
        });
    
</script>
</body>
</html>

在线演示

让链接同时具备两种打开方式