表白墙之旋转木马

冒险岛_0_

已于 2022-12-19 14:21:21 修改

阅读量125

点赞数

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

于 2022-12-19 14:19:45 首次发布

本文链接：https://blog.csdn.net/qq_41741971/article/details/128372083

版权

web 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

实现技术：

1. HTML、CSS、JS

2. 自动轮播旋转技术

可用于表白（温馨提示：不可鲁莽表白哦~{-_-}~）

实现效果：

实现主要代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Test</title>
	<!-- <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> -->
	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_2152226_prbu8zlgex.css">
	<link rel='stylesheet' href='./css/gallery.css'>
</head>
<body>
    <div class="row">
    	<section class="container span6">
    		<div class="carusel">
    			<img class="figure" src="images/1.jpg">
    			<img class="figure" src="images/2.jpg">
    			<img class="figure" src="images/3.jpg">
    			<img class="figure" src="images/4.jpg">
    			<img class="figure" src="images/5.jpg">
    			<img class="figure" src="images/7.jpg">
    		</div>
    		<div class="btn_links">
    			<a href="#" class="button"></a>
    			<a href="#" class="button"></a>
    			<a href="#" class="button"></a>
    			<a href="#" class="button"></a>
    			<a href="#" class="button"></a>
    			<a href="#" class="button"></a>
    		</div>
    	</section>
        <div class="span3">
        <div id="AudioCom">
            <div  class="wtao">
             <a href="###"><i class="icon iconfont"></i></a>
            </div>
            <audio id="Audio">
              <source src="./audio/zj.mp3" >
            </audio>
        </div>
        <div class="jtou">
            <img src="images/xs.png" alt="箭头" width="200" height="500">
        </div>
        </div>
    </div>
    <script src="./js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src = "js/jQuery.cubeGalleryPlagin.js"></script>
</body>
</html>

代码下载地址：HTML实现表白墙之旋转木马-Javascript文档类资源-CSDN下载