css3 html js制作背景自动幻灯片cid1124-网页前端设计

作者code
  1. <!doctype html>
  2. <html>
  3. <head>
  5. <title>jQuery mkinfinite Plugin Demo</title>
  6. <style>
  9. html, body {
  10. height: 100%;
  11. margin: 0px;
  12. padding: 0px;
  13. }
  15. body {
  17. min-width: 999px;
  18. }
  20. header {
  21. height: 100%;
  22. position: relative;
  23. }
  25. header div.content {
  26. width: 100%;
  27. position: absolute;
  28. left: 0px;
  29. right: 0px;
  30. top: 50%;
  31. max-width: none;
  32. height: 190px;
  33. margin-top: -95px;
  34. background: rgba(255,255,255,0.8);
  35. text-align: center;
  36. font-size: 80px;
  37. font-family: impact;
  39. }
  43. .color-1 {
  44. color: #00bfff;
  45. line-height: 180px;
  46. }
  48. .color-2 {
  49. color: #ff007f;
  50. margin-left: 10px;
  51. }
  53. </style>
  54. </head>
  55. <body>
  56. <header>
  57. <div class="content">
  58. <span class="color-1">IMAGE</span><span class="color-2">SLIDESHOW</span> </div>
  60. </header>
  62. <script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  64. <script type="text/javascript" src="../src/jquery.mkinfinite.js"></script>
  66. <script type="text/javascript">
  67. $(document).ready(function(){
  68. $('header').mkinfinite({
  69. maxZoom: 1.4,
  70. animationTime: 4000,
  71. imagesRatio: (960 / 720),
  72. isFixedBG: true,
  73. zoomIn: true,
  74. imagesList: new Array(
  75. 'https://images.pexels.com/photos/1368389/pexels-photo-1368389.jpeg?cs=srgb&dl=dawn-dusk-fog-1368389.jpg&fm=jpg',
  76. 'https://images.pexels.com/photos/1677358/pexels-photo-1677358.jpeg?cs=srgb&dl=aerial-shot-bird-s-eye-view-buildings-1677358.jpg&fm=jpg',
  78. 'https://images.pexels.com/photos/1141853/pexels-photo-1141853.jpeg?cs=srgb&dl=architecture-bridge-fog-1141853.jpg&fm=jpg',
  79. 'https://images.pexels.com/photos/1115487/pexels-photo-1115487.jpeg?cs=srgb&dl=dawn-daylight-hill-1115487.jpg&fm=jpg'
  80. )
  81. });
  82. });
  83. </script>
  84. index-2.html
  85. </body>
  86. </html>
<!doctype html>
<html>
<head>
 
    <title>jQuery mkinfinite Plugin Demo</title>
    <style>
 

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
   
  min-width: 999px;
}

header {
  height: 100%;
  position: relative;
}

header div.content {
  width: 100%;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
  max-width: none;
  height: 190px;
  margin-top: -95px;
  background: rgba(255,255,255,0.8);
  text-align: center;
    font-size: 80px;
    font-family: impact;
    
}

 

.color-1 {
  color: #00bfff;
    line-height: 180px;
}

.color-2 {
  color: #ff007f;
    margin-left: 10px;
}
    
    </style>
</head>
  <body>
    <header>
      <div class="content">
          <span class="color-1">IMAGE</span><span class="color-2">SLIDESHOW</span> </div>
       
    </header>
    
    <script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    
    <script type="text/javascript" src="../src/jquery.mkinfinite.js"></script>
    
    <script type="text/javascript">
      $(document).ready(function(){
        $('header').mkinfinite({
          maxZoom:       1.4,
          animationTime: 4000,
          imagesRatio:   (960 / 720),
          isFixedBG:     true,
          zoomIn:        true,
          imagesList:    new Array(
            'https://images.pexels.com/photos/1368389/pexels-photo-1368389.jpeg?cs=srgb&dl=dawn-dusk-fog-1368389.jpg&fm=jpg',
            'https://images.pexels.com/photos/1677358/pexels-photo-1677358.jpeg?cs=srgb&dl=aerial-shot-bird-s-eye-view-buildings-1677358.jpg&fm=jpg',
                        
            'https://images.pexels.com/photos/1141853/pexels-photo-1141853.jpeg?cs=srgb&dl=architecture-bridge-fog-1141853.jpg&fm=jpg',
            'https://images.pexels.com/photos/1115487/pexels-photo-1115487.jpeg?cs=srgb&dl=dawn-daylight-hill-1115487.jpg&fm=jpg'
          )
        });
      });
    </script>
index-2.html
  </body>
</html>

在线演示

让链接同时具备两种打开方式
获取源码: Simple-jQuery-Background-Slideshow-with-Zoom-Animations-mkinfinite
下载数:130人次, 文件大小: 2.9 KB, 上传日期: 2020年-11 月-29日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,938 人查阅

类似文章