【博主推荐】html好看的图片轮播多种风格（源码）

news2025/1/31 3:00:04

html好看的图片轮播多种风格

    • 所有轮播图动态效果展示
    • 1.普通自带按钮切换轮播图
      • 1.1 效果展示
      • 1.2 源码
    • 2.自动切换图片
      • 2.1 效果展示
      • 2.2 源码
    • 3.鼠标拖动切换图片
      • 3.1 效果展示
    • 4.数字按钮拖动切换图片
      • 4.1 效果展示
    • 5.图片带缩略图
      • 5.1 效果展示
    • 6.上下拖动切换图片
      • 6.1 效果展示
    • 7. 3D切换图片
      • 7.1 效果展示
    • 8.带文字的轮播图
      • 8.1 效果展示
    • 9.轮播过渡切换特效
      • 9.1 效果展示
    • 10.横向滚动图片
      • 10.1 效果展示
    • 11.基本轮播图
      • 11.1 效果展示
    • 12.三维切换轮播图
      • 12.1 效果展示
    • 13.书本切换轮播图
      • 13.1 效果展示
    • 源码下载
    • 好的html源码下载

多种轮播效果图，支持配置，可以自动切换，鼠标拖动，角标按钮切换，不一样的切换效果，可以直接嵌入项目使用，简单灵活。

  • 代码结构
    在这里插入图片描述

所有轮播图动态效果展示

xcLeigh - 轮播图

1.普通自带按钮切换轮播图

  • 纯css写的轮播图，仅支持按钮切换

1.1 效果展示

在这里插入图片描述

1.2 源码

<!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>xcLeigh - 轮播图</title>
    <style>
        /*使轮播图弹性布局，居中设置最小高度*/
        body{
            display: flex;
            justify-content: center;
			margin:0px;padding:0px;
            align-items: center;
           /* 1vh 意味着值为视口高度的 1%,vh 则与设备视口的高度有关 */
             min-height: 100vh;
        }
        /* 定义一个图片轮播区域 */
        ul.slides{
            position: relative;
            width: 600px;
            height: 280px;
            list-style: none;
            margin: 0;
            padding: 0;
            background-color: #eee;
            overflow: hidden;
        }
    /* 设置每个图片的从左往右弹性盒子排版以及水平垂直居中 */
        li.slide{
            margin: 0;
            padding: 0;
            width: inherit;
            height: inherit;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            /* font-family: Helvetica;
            font-size: 120px;
            color: #fff; */
            transition: .5s transform ease-in-out;
        }
 
        /* 为6个li添加背景图 */
        .slide:nth-of-type(1){
            background:url(img/p1.jpg) no-repeat;
            background-size: cover;
            background-position: top;
        }

        .slide:nth-of-type(2){
            background:url(img/p2.jpg) no-repeat;
            background-size: cover;
            background-position: top;
            left: 100%;
        }
 
        .slide:nth-of-type(3){
            background:url(img/p3.jpg) no-repeat;
            background-size: cover;
            background-position: top;
            left: 200%;
        }
 
        .slide:nth-of-type(4){
            background:url(img/p4.jpg) no-repeat;
            background-size: cover;
            background-position: top;
            left: 300%;
        }
 
        .slide:nth-of-type(5){
            background:url(img/p5.jpg) no-repeat;
            background-size: cover;
            background-position: top;
            left: 400%;
        }
 
        /* 设置按钮作为相对定位和覆盖图片区域 */
        input[type="radio"]{
            position: relative;
            z-index: 100;
            display: none;
        }
 
        /* 设置与label相关联的按钮的位置 */
        .controls-visible{
            position: absolute;
            width: 100%;
            bottom: 12px;
            text-align: center;
        }
 
        /* 设置这一组6个label的排列方式并且设置它们的初始样式为白色带有白色边框(以便于选中的变化效果明显) */
        .controls-visible  label{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 5px;
            border: 2px solid #fff;
        }
        /* 当点击label同时按钮被选中时，与之联动定位的label样式发生改变 */
        .slides input[type="radio"]:nth-of-type(1):checked~
        .controls-visible label:nth-of-type(1)
        {
            background-color: #333;
        }
        .slides input[type="radio"]:nth-of-type(2):checked~
        .controls-visible label:nth-of-type(2)
        {
            background-color: #333;
        }
        .slides input[type="radio"]:nth-of-type(3):checked~
        .controls-visible label:nth-of-type(3)
        {
 
            background-color:#333;
        }
        .slides input[type="radio"]:nth-of-type(4):checked~
        .controls-visible label:nth-of-type(4)
        {
            background-color: #333;
        }
        .slides input[type="radio"]:nth-of-type(5):checked~
        .controls-visible label:nth-of-type(5)
        {
            background-color: #333;
        }
        /* 当按钮radio被选中时，后面的兄弟元素向左移动一个图片区域距离 */
        .slides input[type="radio"]:nth-of-type(1):checked~.slide{
 
            transform: translateX(0%);
 
        }
        .slides input[type="radio"]:nth-of-type(2):checked~.slide{
 
            transform: translateX(-100%);
 
        }
        .slides input[type="radio"]:nth-of-type(3):checked~.slide{
 
            transform: translateX(-200%);
 
        }
        .slides input[type="radio"]:nth-of-type(4):checked~.slide{
 
            transform: translateX(-300%);
 
        }
        .slides input[type="radio"]:nth-of-type(5):checked~.slide{
 
            transform: translateX(-400%);
 
        }
    </style>
</head>
 
<body>
    <!-- 用ul包裹三个组件 -->
    <ul class="slides">
        <!-- 设置6个radio按钮 -->
        <input type="radio" id="control-1" name="control" checked>
        <input type="radio" id="control-2" name="control">
        <input type="radio" id="control-3" name="control">
        <input type="radio" id="control-4" name="control">
        <input type="radio" id="control-5" name="control">
       <!-- 设置处于按钮之后的同一级6个兄弟元素li -->
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
        <!-- 设置label与input相关联 -->
        <div class="controls-visible">
            <label for="control-1"></label>
            <label for="control-2"></label>
            <label for="control-3"></label>
            <label for="control-4"></label>
            <label for="control-5"></label>
        </div>
    </ul>
</body>
</html>

2.自动切换图片

  • JS+CSS写的自动切换图片

2.1 效果展示

在这里插入图片描述

2.2 源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<style type="text/css">
/* 标签选择器 */
p {
    text-align: center;
    font-size: 25px;
    color: cadetblue;
    font-family: fantasy;
}
/* id选择器 */
#hr1 {
    background-color: cadetblue;
    height: 2px;
    width: 75%;
}
/* 类选择器 */
.imgbox {
    border-top: 5px solid cadetblue;
   /* 避免因窗口变化影响图片效果 */
    width: 60%;
    height: 40%;
    margin: 0 auto;
}
.img {
    width: 60%;
    height: 40%;
    margin: 0 auto;
    display: none;
}
</style>
        <title>xcLeigh - 轮播图</title>
    </head>
    <body>
        <!-- 建立一个div控件作为图片框 -->
        <div class="imgBox">
            <!-- alt：图片路径失败时替换显示内容 -->
            <img class="img-slide img" src="img/s1.png" alt="img1">
            <img class="img-slide img" src="img/s2.png" alt="img2">
            <img class="img-slide img" src="img/s3.png" alt="img3">
            <img class="img-slide img" src="img/s4.png" alt="img4">
            <img class="img-slide img" src="img/s5.png" alt="img5">
        </div>
    </body>
    <script type="text/javascript">
        // index：索引， len：长度
        var index = 0, len;
        // 类似获取一个元素数组
        var imgBox = document.getElementsByClassName("img-slide");
        len = imgBox.length;
        imgBox[index].style.display = 'block';
        // 逻辑控制函数
        function slideShow() {
            index ++;
            // 防止数组溢出
            if(index >= len) index = 0;
            // 遍历每一个元素
            for(var i=0; i<len; i++) {
                imgBox[i].style.display = 'none';
            }
            // 每次只有一张图片显示
            imgBox[index].style.display = 'block';
        }
        // 定时器，间隔3s切换图片
        setInterval(slideShow, 3000);
    </script>
</html>

3.鼠标拖动切换图片

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动，自定义时间切换等相关配置。

3.1 效果展示

在这里插入图片描述

4.数字按钮拖动切换图片

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动,支持点击数字角标，支持点击左右切换按钮，自定义时间切换等相关配置。

4.1 效果展示

在这里插入图片描述

5.图片带缩略图

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动，支持点击左右切换按钮，自定义时间切换等相关配置。

5.1 效果展示

在这里插入图片描述

6.上下拖动切换图片

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动，自定义时间切换等相关配置。

6.1 效果展示

在这里插入图片描述

7. 3D切换图片

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动，自定义时间切换等相关配置。

7.1 效果展示

在这里插入图片描述

8.带文字的轮播图

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动，自定义时间切换等相关配置。

8.1 效果展示

在这里插入图片描述

9.轮播过渡切换特效

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动，自定义时间切换等相关配置。

9.1 效果展示

在这里插入图片描述

10.横向滚动图片

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动，自定义时间切换等相关配置。

10.1 效果展示

在这里插入图片描述

11.基本轮播图

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动，自定义时间切换等相关配置。

11.1 效果展示

在这里插入图片描述

12.三维切换轮播图

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动，自定义时间切换等相关配置。

12.1 效果展示

在这里插入图片描述

13.书本切换轮播图

  • JS+CSS 静态看不出效果，看效果，请在所有动态介绍，这个支持鼠标拖动，自定义时间切换等相关配置。

13.1 效果展示

在这里插入图片描述

源码下载

【博主推荐】html好看的图片轮播多种风格的源码 点击下载

好的html源码下载

🧡💛💚💙💜【总览】程序员前端、后端资源合集

🧡💛💚💙💜【博主推荐】HTML制作一个美观的个人简介网页（附源码）

🧡💛💚💙💜【博主推荐】html好看的个人简历网页版(附源码)

🧡💛💚💙💜【博主推荐】html好看的个人主页(附源码)

🧡💛💚💙💜【博主推荐】html好看的邀请函(附源码)

🧡💛💚💙💜【博主推荐】html好看的音乐播放器(附源码)

🧡💛💚💙💜【博主推荐】html好看的拼图小游戏(附源码)

🧡💛💚💙💜【博主推荐】html好看的拼图验证码(附源码)

🧡💛💚💙💜【博主推荐】html界面绘制SVG图形(附源码)

🧡💛💚💙💜【博主推荐】html操作SVG图(附源码)

🧡💛💚💙💜【博主推荐】html下拉框树形（附好看的登录界面）

🧡💛💚💙💜【博主推荐】HTML5响应式手机WEB(附源码)

🧡💛💚💙💜【博主推荐】大数据可视化大屏(源码下载)

🧡💛💚💙💜【博主推荐】html引用百度地图定位闪烁弹框树形(附源码)

🧡💛💚💙💜【博主推荐】HTML酷炫动画表白求爱界面(附源码)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407666.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

X-Frame-Options简介

X-Frame-Options简介

最近安全检查&#xff0c;发现没有保障和避免自己的网页嵌入到别人的站点里面&#xff0c;于是需要设置X-Frame-Options增加安全性。 网上查了查资料&#xff0c;这里记录一下。 可以使用下面工具进行验证&#xff1a;Clickjacking Tool | Test | UI Redressing 1、X-Frame-Op…
阅读更多...
3.js中判断数组中是否存在某个对象/值，判断数组里的对象是否存在某个值 的五种方法 及应用场景|判断数组里有没有某对象，有不添加，没有则添加到数组

3.js中判断数组中是否存在某个对象/值，判断数组里的对象是否存在某个值 的五种方法 及应用场景|判断数组里有没有某对象，有不添加，没有则添加到数组

3.js中判断数组中是否存在某个对象/值&#xff0c;判断数组里的对象是否存在某个值 的五种方法 及应用场景 一、当数组中的数据是简单类型时&#xff1a; 应用js中的indexof方法&#xff1a;存在则返回当前项索引&#xff0c;不存在则返回 -1。 var arr[1,2,3,4]var str2// …
阅读更多...
ECharts设置双x轴

ECharts设置双x轴

下面给大家分享一下ECharts的几种功能&#xff0c;循序渐进地实现一个复杂的曲线图。 V1.0&#xff1a; 代码&#xff1a; let option {title: { text: V1.0 },legend: { data:[销量] },// x轴的数据xAxis: {data: ["王","胡歌","曾小贤",&q…
阅读更多...
Vue3使用axios的配置教程详解

Vue3使用axios的配置教程详解

1.安装 npm install --save axios vue-axios2.在src根目录创建service文件夹。然后创建axios.js 2.1在axios.js添加拦截器,请求拦截:initAxios.interceptors.request;响应拦截:initAxios.interceptors.response import axios from "axios";const initAxios axios.…
阅读更多...
用idea创建vue项目

用idea创建vue项目

目录 一、安装node.js &#xff08;1&#xff09;下载安装包 &#xff08;2&#xff09;测试node.js是否安装成功 &#xff08;3&#xff09;安装vue和全局vue-cli 二、idea安装vue.js插件 三、创建vue项目 四、修改配置文件 五、配置idea运行的环境 一、安装node.js …
阅读更多...
ERROR: npm v9.4.1 is known not to run on Node.js v8.13.0.

ERROR: npm v9.4.1 is known not to run on Node.js v8.13.0.

前面全是废话&#xff0c;大家可以直接看序号8下面的nvm的命令以及序号11之后的问题解决&#xff0c;希望能帮助到你们&#xff01;是个什么问题呢&#xff1f;昨天领导给了个前后端分离的项目&#xff0c;让不才我搭建一下环境&#xff0c;我兴高采烈的拿着项目搭建手册按照文…
阅读更多...
微信小程序开发 app.json全局配置

微信小程序开发 app.json全局配置

JSON 是一种数据格式&#xff0c;在实际开发中&#xff0c;JSON 总是以配置文件的形式出现。app.json 是当前小程序的全局配置&#xff0c;可以通过app.json对小程序项目进行设置所有页面路径、窗口外观、界面表现、底部 tab 等。{"pages": ["pages/index/index…
阅读更多...
vue中实现文件批量打包压缩下载（以及下载跨域问题分析）

vue中实现文件批量打包压缩下载（以及下载跨域问题分析）

上次做了一个选择多个数据生成多个二维码并下载&#xff0c;当时项目催的紧&#xff0c;就简单写了个循环生成二维码下载&#xff0c;一次性会下载很多文件&#xff0c;特别难整理&#xff1b; 刚好这次项目又遇到类似这种功能&#xff0c;需要一次性批量下载多个文件&#xf…
阅读更多...
浅谈uniapp的flex布局

浅谈uniapp的flex布局

文章目录1 flex布局1.1 flex-direction1.2 flex-wrap1.3 justify-content1.4 align-items1.5 align-content属性1.6 其他项目属性1.6.1 order属性1.6.2 flex-grow属性1.6.3 flex-shrink属性1.6.4 flex属性1 flex布局 ​ flex是Flexible Box的缩写&#xff0c;意为”弹性布局”…
阅读更多...
TypeError: this.$message is not a function报错情况解决

TypeError: this.$message is not a function报错情况解决

在最近负责的一个前端项目中&#xff0c;使用this.$message报错了&#xff0c;之前也没注意&#xff0c;然后这次抽空看了一下问题 报错原因是因为我用了这种提示写法&#xff1a; 首先&#xff0c;我最开始是用基础写法&#xff1a; 但是这种写法有个弊端&#xff0c;就是如…
阅读更多...
【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

⌚️⌚️⌚️个人格言&#xff1a;时间是亳不留情的&#xff0c;它真使人在自己制造的镜子里照见自己的真相! &#x1f4d6;Git专栏&#xff1a;&#x1f4d1;Git篇&#x1f525;&#x1f525;&#x1f525; &#x1f4d6;JavaScript专栏&#xff1a;&#x1f4d1;js实用技巧篇…
阅读更多...
腾讯地图api使用——地图选点自动定位到当前位置

腾讯地图api使用——地图选点自动定位到当前位置

WebService API | 腾讯位置服务 用户在使用腾讯地图api时&#xff0c;需先申请腾讯位置服务API Key&#xff0c;该key在调用时用于唯一标识开发者身份。 1.自动获取当前位置 引入以下js文件 https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js //获…
阅读更多...
FAST_LIO_SAM 融入后端优化的FASTLIO SLAM 系统 前端：FAST_LIO2 后端：LIO_SAM

FAST_LIO_SAM 融入后端优化的FASTLIO SLAM 系统 前端：FAST_LIO2 后端：LIO_SAM

FAST_LIO_SAM Front_end : fastlio2 Back_end : lio_sam Videos : FAST-LIO-SAM Bilibili_link Source code : FAST_LIO_SAM Related worked 1.FAST-LIO2为紧耦合的lio slam系统&#xff0c;因其缺乏前端&#xff0c;所以缺少全局一致性&#xff0c;参考lio_sam的后端部分&…
阅读更多...
Vue3 reactive丢失响应式问题

Vue3 reactive丢失响应式问题

问题描述&#xff1a;使用 reactive 定义的对象&#xff0c;重新赋值后失去了响应式&#xff0c;改变值视图不会发生变化。 测试代码&#xff1a; <template><div><p>{{ title }}</p><ul><li v-for"(item, index) in tableData" …
阅读更多...
【小程序】组件化开发的基本使用(一)

【小程序】组件化开发的基本使用(一)

文章目录小程序组件化开发基本使用小程序组件化思想自定义组件的过程组件样式实现细节小程序组件化开发基本使用 小程序组件化思想 组件插槽定义使用 小程序在刚刚推出时是不支持组件化的, 也是为人诟病的一个点&#xff1a; 但是从v1.6.3开始, 小程序开始支持自定义组件开发…
阅读更多...
如何创建一个简易的HTML网页框架

如何创建一个简易的HTML网页框架

背景&#xff1a; 在我们初步学习了web前端开发的一些知识时&#xff0c;我们可能会考虑构建一个简单的html网站&#xff0c;但是&#xff0c;如何着手去开始我们的网站&#xff0c;对于新手来说可能是个问题。 在这篇文章中&#xff0c;我将介绍我在构建一个简易的网页时&am…
阅读更多...
Vue2中使用axios的三种方法

Vue2中使用axios的三种方法

第一种 原始方法 直接在项目中使用(不建议使用) 这种方法最简单粗暴 优点&#xff1a;不需要做封装&#xff0c;不需要做配置傻瓜式操作&#xff0c;不需要做异步处理 缺点&#xff1a;代码太繁琐&#xff0c;当遇到请求过多的时候&#xff0c;这样写不适合读写 注意&#…
阅读更多...
使用videojs播放m3u8视频

使用videojs播放m3u8视频

vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库&#xff0c;可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频。流媒体传输协议(hls)定义了用来控制播放的m3u8文件 m3u8是一个文本文件(播放列表文件)&#xff0c;里面的内容就是被播放的音视频文件路…
阅读更多...
vue3 - 组件注册和组件通信（setup语法糖）

vue3 - 组件注册和组件通信（setup语法糖）

这里介绍的是vue3中组件的注册和组件通信父传子&#xff0c;子传父。 前提&#xff1a;用的是vue3版本且使用了setup语法糖 <script setup> .....<script> 1&#xff0c;组件注册 1.1&#xff0c;全局注册&#xff1a; 全局注册需要在 在main.js中进行注册&#x…
阅读更多...
SpringBoot整合调用微信模板方法实现微信公众号消息通知推送，Java实现微信公众号给关注用户推送自定义消息通知（手把手从0到1）

SpringBoot整合调用微信模板方法实现微信公众号消息通知推送，Java实现微信公众号给关注用户推送自定义消息通知（手把手从0到1）

目录 概述 公众号给关注用户推送自定义消息 一、申请公众号模板消息 二、获取安装“web开发者工具” 三、微信网页授权说明 四、微信网页授权 - 流程时序图 五、HTTPClient 实现微信公众号消息推送与发布&#xff08;四步走&#xff09; 六、通过weixin-java-mp SDK实现…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023