给网页顶部添加轮播图

源码分享 · 04-09 13:42

想给网页加个炫酷的图片轮播吗?自动加手动二合一的图片轮播图!这篇文章可以参考参考!简单几步,让网页顶部动起来,吸引眼球。快来看看怎么做到的吧!

效果展示

本站首页即见,或者点我查看效果吧!

具体操作

1.复制代码

傻瓜式操作,复制以下代码到你需要添加的地方即可:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.js"></script>

    <style>
        .swiper-container {
            width: 600px;
            height: 400px;
        }
        .swiper-pagination-bullet-active {
            background-color: #fff;
        }
    </style>

</head>

<body>
    <div class="swiper-container">  <!-- 如果需要关闭手动控制滑动 把标签swiper-no-swiping添加进去-->
        <div class="swiper-wrapper">
        <!-- 这里放轮播的东西 图片文字都可以 -->
            <div class="swiper-slide"><img src="images/01.png" alt=""></div>
            <div class="swiper-slide"><img src="images/02.png" alt=""></div>
            <div class="swiper-slide"><img src="images/03.png" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <script>
window.onload = function () {
    var mySwiper = new Swiper('.swiper-container', {
        // direction: 'horizonal',
        loop: true,
        autoplay: {
            delay: 2000,   // 轮播间隔时间
            stopOnLastSlide: false,
            disableOnInteraction: false,
            
        },
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable:true
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
}
    </script>
</body>

</html>

2.样式优化

如果你想要左右使用iconfont的效果,将以下css代码添加到前面的html代码中即可:

.swiper-button-prev,.swiper-button-next{
            background: none;
        }
         .swiper-button-prev i,.swiper-button-next i{
            font-size:40px;
            color: aqua; 
        }

 .swiper-pagination-bullet-active {
             opacity: 1;
             background: #6ce68a;
          }

也要记得把这个代码添加上哦,不然没有效果!

<div class="swiper-button-prev"><i class="iconfont icon-left"></i></div>
        <div class="swiper-button-next"><i class="iconfont icon-zuoyoujiantou"></i></div>

补充

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单横幅轮播效果 刘郎阁</title>
 
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
 
<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function function_name() {
                imageAutoChange()
            })
</script>
<script>

function imageAutoChange() {
    /*获取图片和索引的数组对象*/
    var $imgs = $("#main_div_img li");
    var $nums = $("#main_div_num li");
 
    var isStop = false;
    var index = 0;
    $nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
    $imgs.eq(index).show();
 
    /*鼠标悬停在数字上的事件处理*/
    $nums.mouseover(function() {
        isStop = true;
        /*先把数字的背景改了*/
        $(this).addClass("numsover").siblings().removeClass("numsover");
 
        /*图片的索引和数字的索引是对应的,所以获取当前的数字的索引就可以获得图片,从而对图片进行操作处理*/
        index = $nums.index(this);
        $imgs.eq(index).show("slow");
        $imgs.eq(index).siblings().hide("slow");
    }).mouseout(function() {
        isStop = false
    });
    /*设置循环*/
    setInterval(function() {
        if(isStop) return;
        if(index >= 6) index = -1;
        index++;
 
        $nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
        $imgs.eq(index).show("slow").siblings().hide("slow");
 
    }, 2000);
 
 
 
}


</script>
<style type="text/css">
    html,body{
        height: 100%;
    }
    body{
        margin: 0;
    }
</style>
<style>

#main_div{  
    width:100%;  
    height:600px;  
    position:absolute;  
}  
/*取消小圆点*/  
#main_div li{  
    list-style:none;  
}  
#main_div_img {  
    margin:0; 
    padding: 0px;
}  
 
#main_div_img li{  
    display:none; 
    margin:0; 
    padding: 0px;
}  
 
/*角落显示数字的ul*/  
#main_div_num{  
    overflow:hidden;  
    position:absolute;  
    bottom:10px;  
    right:10px;  
    color:#FFF;  
}  
/*数字的浮动*/  
#main_div_num li{  
    border:#FFF solid 1px;  
    float:left;  
    margin:0px 5px;  
    padding:3px 10px;  
}  
.numsover{  
    background-color:#F08080;  
    color:#F00;  
}  
 
.numsout{} 

</style>
</head>
 
<body >
    <div id="main_div">
        
        <ul id="main_div_img" >
               
            <li><img src="https://imgs.vjo.cc/Typecho/2024_06/0601/IMG_6047.gif" width="100%" height="600" /></li>
            <li><img src="https://imgs.vjo.cc/Typecho/2024_06/0601/IMG_6044.gif" width="100%" height="600" /></li>
            <li><img src="https://imgs.vjo.cc/Typecho/2024_06/0601/IMG_6046.gif" width="100%" height="600" /></li>
            <li><img src="https://imgs.vjo.cc/Typecho/2024_06/0601/IMG_6045.gif" width="100%" height="600" /></li>
            <li><img src="https://imgs.vjo.cc/Typecho/2024_06/0601/IMG_6044.gif" width="100%" height="600" /></li>
            <li><img src="https://imgs.vjo.cc/Typecho/2024_06/0601/IMG_6043.gif" width="100%" height="600" /></li>
        </ul>
        <ul id="main_div_num">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
        
</body>
</html>

这是另一种轮播图😎

写在最后

总的一句,那就是复制粘贴复制粘贴。然后再根据你自己的主题或者根据你自己的需求,进行微调即可!

完!

Typecho 组件 优化 源码分享

上一篇 : Typecho前台添加编辑文章功能

下一篇 : 给网页顶部添加加载进度条


  1. HowieHz   Lv1
    06-18 12:49 第7楼 中国上海市移动Windows 10 · Google Chrome

    这个样式不错,收藏了

  2. 浮沉流年   访客
    04-10 12:11 第3楼 中国新疆伊犁州霍城县电信iPhone · Safari

    我去拿来试试看

    1. 刘郎   博主
      04-10 12:13 第4楼 中国贵州省移动Windows 10 · Google Chrome
      @浮沉流年

      食用愉快😀

  3. 04-09 22:03 第1个脚印 中国安徽省安庆市联通Windows 10 · Google Chrome

    还得是你啊,刘大佬

    1. 刘郎   博主
      04-09 22:11 第2楼 中国移动iPhone · Safari
      @胖氪笔记

      见笑了😂

      1. 04-13 15:55 第5楼 中国安徽省安庆市电信Windows 10 · Google Chrome
        @刘郎

        感谢大佬,我从你的博客已经学习了不少代码了👍

        1. 刘郎   博主
          04-13 20:41 第6楼 中国移动iPhone · Safari
          @胖氪笔记

          大佬谈不上,代码能用上就行😎

| 黔ICP备2024020400号 | 萌ICP备20246777号 | | 当前有 2 人在线 |
本站已加入BLOGS·CN
订阅
Sitemap
博友圈 星球穿梭
开往-友链接力