三种样式的轮播图

一、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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,884评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,755评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,369评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,799评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,910评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,096评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,159评论 3赞 411
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,917评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,360评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,673评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,814评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,509评论 4赞 334
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,156评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,882评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,123评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,641评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,728评论 2赞 351

三种样式的轮播图

推荐阅读更多精彩内容