纠结个问题、求大神帮忙解答、用css代替js做横向轮播图、当轮播时，over部分怎么写、

发布网友发布时间：2022-04-06 13:29

共1个回答

热心网友时间：2022-04-06 14:59

我做的这个是立体的css轮播图：
你可以看下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>

<style>
.main{
position: absolute;
width: 100%;
height:500px;
top:20%;
background-color: #fff;
zoom: 2;
}
.star{
width: 100%;
height: 100%;
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
position: relative;
}
.d1{
position: absolute;
width: 192px;
height: 192px;
left:30%;
top: 0;
/*margin-left: -32px;*/
/*margin-top: -18px;*/
cursor: pointer;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: photoRotate 18s ease-in-out infinite 2s;
animation: photoRotate 18s ease-in-out infinite 2s;
}
.d1>div{
width: 192px;
height: 192px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s, -moz-transform 1s;
transition: opacity 1s, transform 1s;
position: absolute;
bottom: 0;
}
.d11{
-webkit-transform: rotateY(0deg) translateZ(192px);
transform: rotateY(0deg) translateZ(192px);
background-color: rgba(153, 204, 204, 0.8);
}
.d12{
-webkit-transform: rotateY(60deg) translateZ(192px);
transform: rotateY(60deg) translateZ(192px);
background-color: rgba(153, 204, 204, 0.8);
}
.d13{
-webkit-transform: rotateY(120deg) translateZ(192px);
transform: rotateY(120deg) translateZ(192px);
background-color: rgba(153, 204, 204, 0.8);
}
.d14{
-webkit-transform: rotateY(180deg) translateZ(192px);
transform: rotateY(180deg) translateZ(192px);
background-color: rgba(153, 204, 204, 0.8);
}
.d15{
-webkit-transform: rotateY(240deg) translateZ(192px);
transform: rotateY(240deg) translateZ(192px);
background-color: rgba(153, 204, 204, 0.8);
}
.d16{
-webkit-transform: rotateY(300deg) translateZ(192px);
transform: rotateY(300deg) translateZ(192px);
background-color: rgba(153, 204, 204, 0.8);
}
@-webkit-keyframes photoRotate {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
16.7% {
-webkit-transform: rotateY(60deg);
transform: rotateY(60deg);
}
33.3% {
-webkit-transform: rotateY(120deg);
transform: rotateY(120deg);
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
66.7% {
-webkit-transform: rotateY(240deg);
transform: rotateY(240deg);
}
83.3% {
-webkit-transform: rotateY(300deg);
transform: rotateY(300deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}

@keyframes photoRotate {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
16.7% {
-webkit-transform: rotateY(60deg);
transform: rotateY(60deg);
}
33.3% {
-webkit-transform: rotateY(120deg);
transform: rotateY(120deg);
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
66.7% {
-webkit-transform: rotateY(240deg);
transform: rotateY(240deg);
}
83.3% {
-webkit-transform: rotateY(300deg);
transform: rotateY(300deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}

</style>
</head>
<body>
<div class="main">

<div class="star">
<div class="d1">
<div class="d11">
<img src="img/1.jpg" alt=""/>
</div>
<div class="d12">
<img src="img/2.jpg" alt=""/>
</div>
<div class="d13">
<img src="img/2.1.jpg" alt=""/>
</div>
<div class="d14" style="">
<img src="img/3.jpg" alt=""/>
</div>
<div class="d15">
<img src="img/3.1.jpg" alt=""/>
</div>
<div class="d16">
<img src="img/4.jpg" alt=""/>
</div>
</div>
</div>
</div>
</body>
<script>
var a=75834169102;
var b=7287;

console.log(a%b);

</script>
</html>

求CSS图片轮播完整代码?

1.基本布局：将4张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div，相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。2.设置动画：然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可...

求JS 大神,教教我图片轮播、、好心求解

要实现图片滚动轮播，可以有很多方式，无非是通过调整外围容器的位置（left/top）或者内部图片容器的定位（marin-left/margin-top）来实现的。这里我以前者为例（向左滚动）：通常的实现方式是：1) 有一个外层容器，同时作为“视口”，这个viewPort有固定的尺寸，超出的部分隐藏，定位方式为“relative”；2...

bootstrap轮播图模板-如何用Bootstrap制作轮播图

首先我们需要新建一个HTML5的文档,然后在文档中导入Bootstrap的样式文件,这个文件中包含了轮播图所有的样式定义,如下图所示 02 接下来我们需要导入脚本文件,注意先导入Jquery文件,然后导入bootstrap的脚本文件,顺序一定不能颠倒,如下图所示 03 然后在body标签里定义轮播图的容器,容器的大小需要和图片的大小...

如何用DW制作这种图片轮播的效果

这个是要css，结合js或者jq，才能做出来的。网络上都有现成的js代码，可以先学会css，然后自己去套用js代码就可以了。

js代码实现banner图片轮播

引用的js文件 // JavaScript Document //flash js (document).ready(function () { var i_curIndex = 0;var beauBeauSlide; //函数对象 var i_curID = 0; //取得鼠标下方的对象ID var pictureID = 0; //索引ID ("#i_focus_piclist li").eq(0).show(); //默认 autoScroll();("#i...

vue实现左右滑动轮播图?

用vue写一个轮播图效果1、安装依赖npmiswiper@5--savenpmivue-awesome-swiper@3--save版本不过高在main文件里全局引入轮播图和css同时使用Vue.use来注册一个轮播图插件3。2、安装饿了么团队开发的vue专用的轮播图插件：vue-swipenpminstallvue-swipe在index.js文件中引用vue-swipe在index.js中注册组件...

用vue实现一个仿简书的轮播图效果,附代码

编写CSS样式，通过改变图片的class，即可实现轮播效果。将轮播图视为两个部分，如图所示。代码实现如下：为各个slide制定样式。构建模板，包含两个轮播图。在scripts部分，定义nowIndex变量，定时更新nowIndex值。所有图片的class根据nowIndex变化，利用ES6的map类型。可以将slideConfig设为组件的props。本篇文章...

记由css定位引起的乌龙

前言事情要从我写的练手小案例开始说起——案例是一个仿小米官网的二级联动分类菜单栏+轮播图。使用了less预编译和vue框架。效果图如下：预期效果应该是：当鼠标悬浮在左边分类菜单栏时会对应显示二级菜单栏，鼠标移动到二级菜单栏时可以点击对应的连接进行跳转。但是实际上，当我的鼠标从悬浮在菜单栏上，...

求大神解释!韩都衣舍里面有一个放在轮播上面的二级导航,鼠标放在子分 ...

一般这种都是用js做,当纯html+css也能做用hover属性做就好了标题弹出的内容 css：.fuji{position:relative;} .tanchu{display:none} .fuji:hover .tanchu{display:block; position:absolute; right:0px; top:0px}

JS特效一:图片轮播图(JS必须掌握的特效

这里介绍一种非常实用的js特效——图片轮播图。虽然这个特效在网页上很常见，但想要掌握它，还是需要一定的技术基础，特别是js方面的知识。下面我会展示一个图片轮播图的例子，它默认显示第一张图片，并且是响应式的，能够适应不同屏幕尺寸的变化。下面是需要注意的一些细节，我已经用圈圈标注出来了。此外...

css怎么用替代和代替用什么代替说 css hover 什么代替代替什么意思找一个字代替 css什么意思 div+css