美文网首页
三种样式的轮播图

三种样式的轮播图

作者: t遇见 | 来源:发表于2022-10-20 17:16 被阅读0次

一、100%比例轮播图

1.jpg

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中酒网--首页</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- container -->
    <div class="container">
        <!-- swiper -->
        <div class="swiper_bg">
            <a href="" class="active"></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <div class="circle">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</body>
<script src="./js/index.js"></script>
</html>

CSS样式

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
a{
    text-decoration: none;
    color: #666;
}
img{
    display: block;
}
body{
    font-size: 12px;
    color: #666;
    background-color: #fff;
}
.content{
    width: 1200px;
    margin: 0 auto;
}
.container{
    height: 3000px;
    position: relative;
}
/* swiper_bg开始 */
.swiper_bg{
    width: 100%;
    height: 491px;
    position: relative;
    margin-top: 30px;
    border-top: 1px solid #dd0207;
}
.swiper_bg>a.active{
    opacity: 1;
}
.swiper_bg>a{
    display: block;
    opacity: 0;
    width: 100%;
    height: 491px;
    transition: 1.5s;
    position: absolute;
    top: 0;
    left: 0;
}
.swiper_bg>a:nth-child(1){
    background: url(../image/swiper_01.jpg) center center no-repeat;
}
.swiper_bg>a:nth-child(2){
    background: url(../image/swiper_02.jpg) center center no-repeat;
}
.swiper_bg>a:nth-child(3){
    background: url(../image/swiper_03.jpg) center center no-repeat;
}
.swiper_bg>a:nth-child(4){
    background: url(../image/swiper_04.jpg) center center no-repeat;
    background-size: 100% 100%;
}
.swiper_bg>a:nth-child(5){
    background: url(../image/swiper_05.jpg) center center no-repeat;
    background-size: 100% 100%;
}
.swiper_bg>.circle{
    position: absolute;
    top: 450px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 6;
}
.swiper_bg>.circle>span{
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 5px;
    cursor: pointer;
}
.swiper_bg>.circle>span.active{
    background-color: transparent;
    border: 3px solid #fff;
    transform: calc(1.5);
}
/* swiper_bg结束 */

js代码

window.onload = function(){
// 封装获取标签函数
function $(selector){
    return document.querySelectorAll(selector)
}
// container swiper_bg
function swiperBg(){
    var lis = $('.swiper_bg a')
    var circles = $('.circle span')
    var indexCir = 0
    var timer = setInterval(play,3000)
    // 轮播
    function play(){
        indexCir++
        if(indexCir>=lis.length){
            indexCir = 0
        }
        for(var i=0;i<lis.length;i++){
            lis[i].className = ''
            lis[i].style.zIndex = '0'
            circles[i].className = ''
        }
        lis[indexCir].className = 'active'
        lis[indexCir].style.zIndex = '2'
        circles[indexCir].className = 'active'
    }
    // circles
    circles.forEach(function(item,index){
        item.onmouseenter = function(){
            clearInterval(timer)
            for(var i=0;i<circles.length;i++){
                circles[i].className = ''
                lis[i].className = ''
                lis[i].style.zIndex = '0'
            }
            this.className = 'active'
            lis[index].className = 'active'
            lis[index].style.zIndex = '2'
            indexCir = index
        }
        item.onmouseleave = function(){
            timer = setInterval(play, 3000)
        }
    })
    // 浏览器优化
    document.addEventListener("visibilitychange", function() {
    if(document.hidden) {
        clearInterval(timer) // 浏览器隐藏，清除计时器
    } else {
        timer = setInterval(play, 3000) // 浏览器显示，正常轮播
    }
    })
}
swiperBg()
}

二、手动箭头轮播图

2.jpg 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            position: relative;
            width: 600px;
            height: 400px;
            margin: 100px auto 0 auto;
            overflow: hidden; 
            box-shadow: dimgrey;
        }  
        .b{
            position: absolute; 
            width: 4200px;
            height: 400px;
            display: flex;
            z-index: 1;
        }
        .b img{
            float:left;
            width: 600px;
            height: 400px;
        }
        /* 图片 */
        .c{
            position: absolute;
            left: 30px;
            top: 150px;
            width: 100px;
            height: 100px;
            z-index: 10;
        } 
        .cc{
            position: absolute;
            left: 450px;
            top: 20px;
            width: 100px;
            height: 100px;
            z-index: 10;
        }
        /* 箭头 */
        .d{
            position: absolute;
            bottom: 10px;
            left: 250px;
            width: 100px;
            height: 50px;
            z-index: 2;
        }
        .d span{
            margin-left: 5px;
            display: inline-block;
            width: 10px;
            height: 10px;
            color:darkgray;
            border-radius: 50%;
            text-align: center;
            cursor: pointer;
            background-color: #000;
        }
        .on{
            background-color: brown!important;
        }
        /* 小圆点 */
    </style>
</head>
<body>
    <div class="a">
        <div class="b"  style="left: -600px;">
            <img src="5.jpg" alt="5" width="600px" height="400px">
            <img src="1.jpg" alt="1" width="600px" height="400px">
            <img src="2.jpg" alt="2" width="600px" height="400px">
            <img src="3.jpg" alt="3" width="600px" height="400px">
            <img src="4.jpg" alt="4" width="600px" height="400px">
            <img src="5.jpg" alt="5" width="600px" height="400px">
            <img src="1.jpg" alt="1" width="600px" height="400px">
        </div>
       <!-- 图片 -->
        <div class="c">
           <img src="6.png" alt="6" width="100px" height="100px" class="ccc">
           <img src="7.png" alt="7" width="100px" height="100px" class="cc">
        </div>
        <!-- 箭头 -->
        <div class="d">
            <span class="on"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <!-- 小圆点 -->
    </div>
</body>
     <script>
         var b=document.querySelector('.b');
         var f=document.querySelector('.ccc');
         var g=document.querySelector('.cc');
         var n=document.getElementsByTagName("span");

        var k=0;
         f.onclick=function(){
             f_pic();
         }
         g.onclick=function(){
             g_pic();
         }
        // 左右箭头，手动轮播
         function g_pic(){
             var e;
             if(b.style.left==="-3600px"){
                 e=-1200;
             }else{
                 e=parseInt(b.style.left)-600;
             }
             b.style.left=e+"px";
             k++;
         if(k>4){
             k=0;
         }
         m();
         }
         function f_pic(){
             var e;
             if(b.style.left==="0px"){
                 e=-2400;
             }else{
                 e=parseInt(b.style.left)+600;
             }
             b.style.left=e+"px";
             k--;
          if(k<0){
             k=4;
         }
         m();
         }
        //  自动播放
         var h=null;
          function autoPlay(){
              h=setInterval(function(){
                  f_pic();
              },1000)            
          }
          autoPlay();
           var a=document.querySelector('.a');
           a.onmouseenter=function(){
               clearInterval(h);
           }
           a.onmouseleave=function(){
               autoPlay();
           }
        //    定时器
       
        function m(){
            for(var i=0;  i<n.length;  i++){
                n[i].className="";
                // console.log(i);    
            }
            n[k].className="on";
        }
        for(var i=0; i<n.length;i++){
            (function(i){
                n[i].onclick=function(){
                    k=i;
                    b.style.left=(k*-600)-600+'px'
                    m()  
                }
            })(i)
        }
     </script>
</html>

三、简易轮播图

3.jpg 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin: 0; padding: 0; box-sizing: border-box;}
    #banner{
      width: 1000px;
      height:300px;
      position: relative;
      margin: auto;
      overflow: hidden;
      border:solid 1px #000;
    }
    #imgs{
      width:4020px;
      height:300px;
      left: 0;
      position: absolute;
    }
    #banner img{
      width:1000px;
      height: 300px;
    }
  </style>

</head>
<body>
  <div id="banner">
    <div id="imgs">
      <img src="./images/1.jpeg" alt="">
      <img src="./images/2.jpeg" alt="">
      <img src="./images/3.jpeg" alt="">
      <img src="./images/1.jpeg" alt="">
    </div>
  </div>
  <script>
    window.onload = function() {
      var _imgs = document.querySelector("#imgs")
      var _width = document.querySelector("#imgs img").offsetWidth
      var bannerTimer = setInterval(play, 3000)    
      var _currLeft = 0; // 当前div#imgs 左侧距离
      var _currIndex = 0; // 当前正在显示的图片
      function play() {  
        // 通过计时器，修改图片索引和位置
        var timer = setInterval(function() {

          // 每20ms 向左移动20像素
          _currLeft -= 20
          if(_currLeft <= -3000) {
            _currLeft = 0
            // 直接显示第一张图片
            _currIndex = 0
            _imgs.style.left = 0
          }
          // 判断动画停止条件
          if(_currLeft < -_currIndex * 1000) {
            
            clearInterval(timer)
            _currIndex++

            if(_currIndex >= _imgs.length) {
              _currIndex = 0
            }
          } else {
            _imgs.style.left = _currLeft + "px"
          }
        }, 20)
      }
    }
  </script>
</body>
</html>

相关文章

  • 轮播图

    样式 轮播图

  • 三种样式的轮播图

    一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • js轮播图

    什么是轮播图呢？能够实现多张图片循环出现效果的我们称之为轮播图。 html样式 css样式 js样式 这就是我敲出...

  • 2019-03-05

    实现轮播图 HTML： css样式 body {...

  • jQuery可任意修改轮播图大小的无缝轮播图

    这个无缝轮播图比之前而言，加入了可随意在CSS样式中修改轮播图大小，JS中无需手动修改。 css样式： html代...

  • 全屏轮播图

    全屏轮播图step1HTML CSS样式

  • React native 第三方组件 React-native-

    简介: 这个框架主要是用来做轮播图,焦点图等,内置了各种样式的轮播图.github地址: https://gith...

  • 四种方式实现轮播图

    不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。 轮播图的基本样式和...

  • 前端常备轮播图js版

    轮播图的思路其实很简单：就是用JavaScript来控制轮播的图片的样式，可以控制display：none or ...

网友评论

      本文标题：三种样式的轮播图

      本文链接：https://www.haomeiwen.com/subject/xspuzrtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|三种样式的轮播图|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！