css3 html 制作旋转滚动滑块设计cid1126-网页前端设计

作者code

index

  1. <!doctype html>
  2. <html>
  3. <head>
  5. <title>jQuery hislide Demo</title>
  9. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
  10. <style>
  12. body{
  13. font-family: 'Roboto Condensed', sans-serif;
  14. overflow-x: hidden;
  16. }
  17. body {
  19. margin:0px;
  20. background: url(ur.jpg) no-repeat;
  21. background-size:cover;
  24. }
  25. h1 { margin:150px auto 30px auto; text-align:center; color:#fff;}
  27. .hi-slide { position: relative; width: 754px; height: 292px; margin: 115px auto 0; }
  29. .hi-slide .hi-next,
  30. .hi-slide .hi-prev
  31. { position: absolute;
  32. top: 50%;
  33. width: 40px;
  34. height: 40px;
  35. margin-top: -20px;
  36. border-radius: 50px;
  39. line-height: 40px;
  40. text-align: center;
  41. cursor: pointer;
  42. background-color: #fff;
  43. color: black;
  44. transition: all 0.6s;
  45. font-size: 20px;
  46. font-weight: bold;
  47. }
  48. .hi-slide .hi-next:hover,
  49. .hi-slide .hi-prev:hover
  50. {
  51. opacity: 1;
  52. background-color: #fff;
  53. }
  55. .hi-slide .hi-prev { left: -60px; }
  57. .hi-slide .hi-prev::before { content: '<'; }
  58. .hi-slide .hi-next { right: -60px; }
  59. .hi-slide .hi-next::before { content: '>'; }
  61. .hi-slide > ul
  62. {
  63. list-style: none;
  64. position: relative;
  65. width: 750px;
  66. height: 245px;
  67. margin: 0;
  68. padding: 0;
  69. }
  72. .hi-slide > ul > li {
  73. overflow: hidden;
  74. position: absolute;
  75. z-index: 0;
  76. left: 377px;
  77. top: 146px;
  78. width: 0;
  79. height: 0;
  80. margin: 0;
  81. padding: 0;
  82. border: 3px solid #fff;
  83. background-color: #333;
  84. cursor: pointer; }
  86. .hi-slide > ul > li > img { width: 100%; height: 100%; background-position: center;}
  90. </style>
  91. </head>
  92. <body>
  93. <br><br>
  94. <div class="slide hi-slide">
  95. <div class="hi-prev "></div>
  96. <div class="hi-next "></div>
  97. <ul>
  98. <li>
  99. <img src="https://code.5g-o.com/wp-content/uploads/2020/12/16.jpg?cs=srgb&dl=attractive-beautiful-beauty-1826557.jpg&fm=jpg" alt="Img 1" /></li>
  100. <li><img src="https://images.pexels.com/photos/405240/pexels-photo-405240.jpeg?cs=srgb&dl=attractive-beautiful-curtain-405240.jpg&fm=jpg" alt="Img 2" /></li>
  101. <li><img src="https://images.pexels.com/photos/1784982/pexels-photo-1784982.jpeg?cs=srgb&dl=attractive-beautiful-beauty-1784982.jpg&fm=jpg" alt="Img 3" /></li>
  102. <li><img src="https://images.pexels.com/photos/219582/pexels-photo-219582.jpeg?cs=srgb&dl=attractive-beautiful-beauty-219582.jpg&fm=jpg" alt="Img 4" /></li>
  103. <li><img src="https://images.pexels.com/photos/247124/pexels-photo-247124.jpeg?cs=srgb&dl=attractive-beautiful-beauty-247124.jpg&fm=jpg" alt="Img 5" /></li>
  104. <li><img src="https://images.pexels.com/photos/1808777/pexels-photo-1808777.png?cs=srgb&dl=attractive-beautiful-beautiful-girl-1808777.jpg&fm=jpg" alt="Img 6" /></li>
  105. <li><img src="https://images.pexels.com/photos/754448/pexels-photo-754448.jpeg?cs=srgb&dl=attractive-beautiful-beauty-754448.jpg&fm=jpg" alt="Img 7" /></li>
  106. <li><img src="https://images.pexels.com/photos/761536/pexels-photo-761536.jpeg?cs=srgb&dl=attractive-beautiful-beauty-761536.jpg&fm=jpg" alt="Img 7" /></li>
  107. </ul>
  108. </div>
  112. <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  113. <script type="text/javascript" src="js/jquery.hislide.js" ></script>
  114. <script>
  115. $('.slide').hiSlide();
  116. </script>
  117. </body>
  119. </html>
<!doctype html>
<html>
<head>
 
    <title>jQuery hislide Demo</title>
                    


 <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
    <style>
 
body{    
    font-family: 'Roboto Condensed', sans-serif;
    overflow-x: hidden;
    
}
        body { 
    
    margin:0px;
background: url(ur.jpg) no-repeat;
background-size:cover;

    
    }
        h1 { margin:150px auto 30px auto; text-align:center; color:#fff;}
   
            .hi-slide { position: relative; width: 754px; height: 292px; margin: 115px auto 0; }
            
.hi-slide .hi-next,
.hi-slide .hi-prev 
            { position: absolute;
              top: 50%; 
              width: 40px;
              height: 40px; 
              margin-top: -20px;     
                border-radius: 50px; 
                 
                
              line-height: 40px;
              text-align: center; 
              cursor: pointer;
              background-color: #fff; 
              color: black;               
              transition: all 0.6s;
              font-size: 20px; 
                font-weight: bold;
            }
           .hi-slide .hi-next:hover, 
            .hi-slide .hi-prev:hover 
            {
            opacity: 1; 
            background-color: #fff;  
            }
            
           .hi-slide .hi-prev { left: -60px; }
            
    .hi-slide .hi-prev::before { content: '<'; }
    .hi-slide .hi-next { right: -60px; }
    .hi-slide .hi-next::before { content: '>'; }
    
            .hi-slide > ul
                    { 
                        list-style: none; 
                        position: relative;
                        width: 750px; 
                        height: 245px; 
                        margin: 0;
                        padding: 0;
            }
            
            
        .hi-slide > ul > li {
            overflow: hidden; 
            position: absolute; 
            z-index: 0; 
            left: 377px;
            top: 146px; 
            width: 0; 
            height: 0; 
            margin: 0; 
            padding: 0;
            border: 3px solid #fff;              
            background-color: #333; 
            cursor: pointer; }
            
        .hi-slide > ul > li > img { width: 100%; height: 100%; background-position: center;}

 

    </style>
  </head>
  <body>
 <br><br>
    <div class="slide hi-slide">
      <div class="hi-prev "></div>
      <div class="hi-next "></div>
      <ul>
        <li>
        <img src="https://code.5g-o.com/wp-content/uploads/2020/12/16.jpg?cs=srgb&dl=attractive-beautiful-beauty-1826557.jpg&fm=jpg" alt="Img 1" /></li>
        <li><img src="https://images.pexels.com/photos/405240/pexels-photo-405240.jpeg?cs=srgb&dl=attractive-beautiful-curtain-405240.jpg&fm=jpg" alt="Img 2" /></li>
        <li><img src="https://images.pexels.com/photos/1784982/pexels-photo-1784982.jpeg?cs=srgb&dl=attractive-beautiful-beauty-1784982.jpg&fm=jpg" alt="Img 3" /></li>
        <li><img src="https://images.pexels.com/photos/219582/pexels-photo-219582.jpeg?cs=srgb&dl=attractive-beautiful-beauty-219582.jpg&fm=jpg" alt="Img 4" /></li>
        <li><img src="https://images.pexels.com/photos/247124/pexels-photo-247124.jpeg?cs=srgb&dl=attractive-beautiful-beauty-247124.jpg&fm=jpg" alt="Img 5" /></li>
        <li><img src="https://images.pexels.com/photos/1808777/pexels-photo-1808777.png?cs=srgb&dl=attractive-beautiful-beautiful-girl-1808777.jpg&fm=jpg" alt="Img 6" /></li>
        <li><img src="https://images.pexels.com/photos/754448/pexels-photo-754448.jpeg?cs=srgb&dl=attractive-beautiful-beauty-754448.jpg&fm=jpg" alt="Img 7" /></li>
                <li><img src="https://images.pexels.com/photos/761536/pexels-photo-761536.jpeg?cs=srgb&dl=attractive-beautiful-beauty-761536.jpg&fm=jpg" alt="Img 7" /></li>
      </ul>
    </div>
    
    
    
  <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.hislide.js" ></script>
    <script>
      $('.slide').hiSlide();
    </script>
  </body>
    
</html>

 在线演示

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

获取源码: nan
下载数:374人次, 文件大小: 139.0 KB, 上传日期: 2020年-12 月-31日

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

qrcode_for_gh_6ea2c28a1709_258 (1)

4,130 人查阅

类似文章