HTML轮播

koudandan

已于 2022-08-23 11:18:26 修改

阅读量2.2k

点赞数 4

分类专栏：前端文章标签： html 前端 javascript

于 2022-08-23 11:13:05 首次发布

本文链接：https://blog.csdn.net/koudandan/article/details/126480673

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

案例包括：banner图轮播、公告轮播、团队图轮播、右侧悬浮窗

1、a.html:

<!doctype html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>轮播</title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>

<!--轮播图-->
<div class="banner" id="banner">
    <ul class="list">
        <li><img src="img/iabout-bj.jpg" title="首页banner1" alt="首页banner1"></li>
        <li><img src="img/iabout-bj.jpg" title="首页banner2" alt="首页banner2"></li>
        <li><img src="img/iabout-bj.jpg" title="首页banner3" alt="首页banner3"></li>
    </ul>
    <ul class="dots"></ul>
    <div class="prev"></div>
    <div class="next"></div>
</div>

<!--轮播公告-->
<div class="notice_div">
    <div class="notice" id="notice">
        <div style="float:left;"><img src="img/notice.png"></div>
        <ul>
            <li>
                <div class="title">最新公告：“十四五”广西科技计划项目申报指南｜提供技术咨询、政策申报服务</div>
                <div class="time">2021-10-25</div>
            </li>
            <li>
                <div class="title">置顶公告：提供技术咨询、政策申报服务</div>
                <div class="time">2021-10-15</div>
            </li>
            <li>
                <div class="title">公告：hahahhahahah</div>
                <div class="time">2021-09-05</div>
            </li>
        </ul>

    </div>
</div>

<!--团队轮播-->
<div class="team">
    <div class="teams">
        <div class="title">标题标题标题标题标题标题标题标题标题标题标题标题</div>
        <div class="adviser">

            <div class="title">
                <div class="y"></div>
                顾问团队 <span> Consultant team</span></div>

            <div class="img-scroll">

                <div id="prev" class="prev prev1"><img src="img/Jleft.png"></div>
                <div class="img-list">
                    <ul>
                        <li>
                            <div class="img"><img src="img/iabout-bj.jpg"></div>
                            <div class="name">段 瑞</div>
                            <p class="desc">中国国务院院长</p>
                        </li>
                        <li>
                            <div class="img"><img src="img/iabout-bj.jpg"></div>
                            <div class="name">云鼎亿</div>
                            <p class="desc">中国中国国务中国国务院中国国务院院长院长院院长国务院院长</p>
                        </li>
                        <li>
                            <div class="img"><img src="img/iabout-bj.jpg"></div>
                            <div class="name">段 瑞</div>
                            <p class="desc">中国国中国中国国务中国国务院中国国务国务院院长务院院长</p>
                        </li>
                        <li>
                            <div class="img"><img src="img/iabout-bj.jpg"></div>
                            <div class="name">段 瑞</div>
                            <p class="desc">中国国务中国中务院院长院长院院长国务院院长院院长</p>
                        </li>
                        <li>
                            <div class="img"><img src="img/iabout-bj.jpg"></div>
                            <div class="name">段 瑞</div>
                            <p class="desc">中国国务院院长中国中国国务中国国务院中国国长</p>
                        </li>
                        <li>
                            <div class="img"><img src="img/iabout-bj.jpg"></div>
                            <div class="name">段 瑞</div>
                            <p class="desc">中国国中国中国国务中国国务院中国国务院院长院长院院长国务院院长院院长国务院院长务院院长</p>
                        </li>

                    </ul>

                </div>
                <div id="next" class="next next1"><img src="img/Jright.png"></div>

            </div>

        </div>
    </div>
</div>

<!--右边栏浮窗-->
<div class="toolbar" id="toolbar">
    <div class="row tel">
        <a href="javascript:;">
            <div style="padding: 10%;">
                <img style="width: 25px;height: 25px;" src="img/contact-us.png">

                <div style="margin-top:-18%;">电话</div>
            </div>
        </a>
        <div class="drop-tel">
            <p>
                <span class="">0731-1234567</span>
            </p>
        </div>
    </div>
    <div class="row code">
        <a href="javascript:;">
            <div style="padding: 10%;">
                <img style="width: 25px;height: 25px;" src="img/consult.png">

                <div style="margin-top:-18%;">留言咨询</div>
            </div>
        </a>
        <div class="drop-code">
            <img src="img/img.png" title="" alt="">
            <h3>扫码关注公众号</h3>
        </div>
    </div>
    <div class="row itop">
        <a href="javascript:;">
            <div style="padding: 20%;">
                <img style="width: 30px;height: 30px;" src="img/go-top.png">
            </div>
        </a>
    </div>
</div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/other.js" type="text/javascript"></script>
<script>
    <!--团队轮播-->
    DY_scroll('.img-scroll', '.prev1', '.next1', '.img-list', 4,);// 顾问团队
</script>

<!--banner轮播-->
<script src="js/jdk-1.2.0.js?time=2"></script>

</body>
</html>

2、index.css:

/*全局*/
* { margin: 0; padding: 0; }
body { font: 14px/2 'Microsoft Yahei', Arial; color: #666; background: #fff; }
ul, ol { list-style-type: none; vertical-align: bottom; }
.clear { float: none !important; clear: both; +line-height: 0; +font-size: 0; +height: 0; }
.hidden { display: none; visibility: visible; }
.wrap { width: 1200px; margin: 0 auto; position: relative; }

/*banner*/
.banner { position: relative; z-index: 8; }
.banner .list { position: relative; overflow: hidden; z-index: 1; }
.banner .list li { position: absolute; width: 100%; height: 100%; overflow: hidden; background: #FFF; display: none; z-index: 1; }
.banner .list li:first-child { display: block; }
.banner .list li.active { z-index: 2; }
.banner .list img { position: relative; display: block; width: 1920px; left: 50%; margin: 0 0 0 -960px; }
.banner .dots { position: absolute; left: 50%; bottom: 30px; margin: 0 0 0 -50px; line-height: 0; z-index: 18; }
.banner .dots li { display: inline-block; +display: inline; +zoom: 1; width: 15px; height: 15px; background: none; background: #fff; border-radius: 50%; margin: 0 8px; cursor: pointer; }
.banner .dots li.active { background-color: #0168b7; }
.banner .prev,
.banner .next { width: 80px; height: 80px; position: absolute; top: 50%; margin: -40px 0 0; z-index: 9; cursor: pointer; display: none; }
.banner .prev { background: url(../img/banner-pw.png) 0 0 no-repeat; left: 50px; }
.banner .next { background: url(../img/banner-pw.png) 0 -80px no-repeat; right: 50px; }
.banner .prev:hover { background-position: -80px 0; }
.banner .next:hover { background-position: -80px -80px; }
.banner .list,
.banner .list img { height: 650px; }
.banner.mini .list,
.banner.mini .list img { height: 350px; }

/*公告*/
.notice_div{background-color: #EEF1FD;width: 100%;height: 50px;}
.notice_div .notice{margin-left:20%;padding: 1%;position: relative;}
.notice_div .notice ul{list-style-type: none;float:left;margin-left: 2%;height: 30px;overflow: hidden;line-height: 30px;}
.notice_div .notice ul li{float: left;width:150%;}
.notice_div .notice ul li .title{float: left;width:50%;}
.notice_div .notice ul li .time{float: left;}

/*超过限制则不显示*/
ul li .title{display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;overflow: hidden;}
ul li .name{display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;overflow: hidden;}
ul li .desc{display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;overflow: hidden;}
.content .title{display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;overflow: hidden;}
.content .desc{display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;overflow: hidden;}

/*****************关于我们--专业团队*/
.team{margin:3% 0 0 0;width: 100%;}
/*顾问团队*/
.team .teams{margin-top: 1%;margin-left:20%;width: 70%;}
.team .teams .title{text-align: center;font-size: 24px;padding: 1%;}
.team .teams .adviser{margin-top:2%;}
.team .teams .adviser .title{display:flex;align-items:center;padding: 2px;font-size: 18px;font-weight: 600;}
.team .teams .adviser .title .y{border-left: 4px solid #4459AF;height: 15px;padding: 2px;}
.team .teams .adviser .title span{font-size: 14px;font-weight: 100;padding: 2px;}
.team .teams .adviser .img-scroll{display: flex;align-items: center;margin-top: 2%;margin-left: -5%;width: 96%;}
.team .teams .adviser .img-scroll .img-list{overflow-x: hidden;display: -webkit-box;-webkit-overflow-scrolling: touch;}
.team .teams .adviser .img-scroll .img-list ul{overflow-x: auto;display: -webkit-box;-webkit-overflow-scrolling: touch;}
.team .teams .adviser .img-scroll .img-list ul li{float: left;border-radius: 10px;text-align: center;margin-right: 20px;}
.team .teams .adviser .img-scroll .img-list ul li .img{width:220px;height: 300px;}
.team .teams .adviser .img-scroll .img-list ul li .img img{width:220px;height: 300px;}
.team .teams .adviser .img-scroll .img-list ul li .name{width: 200px;}
.team .teams .adviser .img-scroll .img-list ul li .desc{width: 200px;}

/*右边栏浮窗*/
.toolbar { position:fixed; top:300px; right:1px; z-index:100; }
.toolbar > * { width:60px; height:60px; position:relative; background:#4459AF; margin:0 0 1px; }
.toolbar > *.itop { background:#4459AF; }
.toolbar > *:first-child { border-top:0; }
.toolbar > * > a { display:block; width:60px; height:60px; text-align:center; color:#FFF; }
.toolbar .qq a { background-position:center 0; }
.toolbar > * > a:hover { background-color:#4459AF; }
.toolbar .drop-code { position:absolute; bottom:0; right:62px; background:#4459AF; padding:5px; font-size:12px; text-align:center; color:#fff; box-shadow:0 0 1px rgba(0,0,0,.2); width:145px; display:none; }
.toolbar .drop-code img { display:block; width:145px; height:145px; }
.toolbar .drop-code h3 { font-weight:normal; }
.toolbar .drop-tel { position:absolute; top:0; right:62px; width:0; overflow:hidden; }
.toolbar .drop-tel p { width:152px; height:60px; line-height:60px; padding:0 0 0 10px; background:#4459AF; color:#FFF; font-size:20px; }
.toolbar .qq:hover,
.toolbar .qiao:hover,
.toolbar .tel:hover,
.toolbar .code:hover { background-color:#4459AF; }
.toolbar .itop:hover { background-color:#4459AF; }

3、other.js:

<!--公告轮播-->
var time = setInterval(function () {
    t();
}, 3000)

function t() {
    var he = $(".notice>ul>li").height();//找到li高
    $(".notice>ul>li").eq(0).appendTo($(".notice>ul")); //复制第一个到最后一个
    $(".notice>ul").animate({
        "marginTop": "-" + he
    }, 500, function () {
        $(".notice>ul").css({
            "marginTop": 0
        })
    })
}

<!--团队轮播-->
function DY_scroll(wraper, prev, next, img, speed) {
    console.log(1);
    var wraper = $(wraper);
    var prev = $(prev);
    var next = $(next);
    var img = $(img).find('ul');
    var w = img.find('li').outerWidth(true);
    var s = speed;
    next.click(function () {
        img.animate({'margin-left': -w}, function () {
            img.find('li').eq(0).appendTo(img);
            img.css({'margin-left': 0});
        });
    });
    prev.click(function () {
        img.find('li:last').prependTo(img);
        img.css({'margin-left': -w});
        img.animate({'margin-left': 0});
    });
}

//右侧悬浮
(function () {
    var $toolbar = $('#toolbar');

    $toolbar.find('.itop').bind('click', function () {
        $('html, body').stop().animate({'scrollTop': 0}, 200);
    })
    $toolbar.find('.code a').bind({
        'mouseenter': function () {
            $(this).next().stop().show(200);
        },
        'mouseleave': function () {
            $(this).next().stop().hide(200);
        }
    })
    $toolbar.find('.tel a').bind({
        'mouseenter': function () {
            $(this).next().stop().animate({'width': 162}, 200);
        },
        'mouseleave': function () {
            $(this).next().stop().animate({'width': 0}, 200);
        }
    })

    $toolbar.find('.close').bind({
        'click': function () {
            $toolbar.children('.pointer').show(300).next().hide();
        }
    })

    $toolbar.find('.pointer').bind({
        'click': function () {
            $toolbar.children('.inner').show(300).prev().hide();
        }
    })
}());

4、jdk.1.2.0.js:

/* jquery.banner
 * 1.0
 * liqingyun
 --------------------------------------------
 $(id).banner();
 --------------------------------------------
 interval   -- 轮播时间
 speed     -- 轮播速度
 --------------------------------------------
 */
(function () {
   $.fn.banner = function (obj) {
      var defaults = {
         interval: 8000,
         speed: 1000
      }

      var opts = $.extend(defaults, obj);

      var $id = this,
         $list = $id.children('.list'),
         $dots = $id.children('.dots'),
         $prev = $id.children('.prev'),
         $next = $id.children('.next'),

         t,

         _index = 0,
         _size = $list.children('*').length;

      if ($dots.length) {
         var _html = '';
         for (var i = 0; i < _size; i++) {
            if (i == 0) {
               _html += '<li class="active"></li>';
            } else {
               _html += '<li></li>';
            }
         }
         $dots.html(_html);
      }

      $list.children('*').eq(0).addClass('active');

      function _prev() {
         _index--;

         if (_index < 0) {
            _index = _size - 1;
         }
         $list.children('*').eq(_index).addClass('active').stop(true, true).fadeIn(opts.speed).siblings('*').removeClass('active').stop(false, false).fadeOut(opts.speed);
         $dots.children('*').eq(_index).addClass('active').siblings().removeClass('active');
      }

      function _next() {
         _index++;

         if (_index >= _size) {
            _index = 0;
         }
         $list.children('*').eq(_index).addClass('active').stop(true, true).fadeIn(opts.speed).siblings('*').removeClass('active').stop(false, false).fadeOut(opts.speed);
         $dots.children('*').eq(_index).addClass('active').siblings().removeClass('active');
      }

      $dots.children('*').click(function () {
         _index = $(this).index() - 1;
         _next();
      })

      $prev.bind('click', function () {
         _prev();
      })

      $next.bind('click', function () {
         _next();
      })

      $id.hover(
         function () {
            clearInterval(t);

            $prev.fadeIn();
            $next.fadeIn();
         },
         function () {
            t = setInterval(function () {
               _next();
            }, opts.interval);

            $prev.fadeOut();
            $next.fadeOut();
         }
      )

      t = setInterval(function () {
         _next();
      }, opts.interval);
   }
})(jQuery);


/*********************************************
 * 底层超集
 ********************************************/
$('#banner').banner();