css+js轮播图，如何用css实现轮播图
更新： 2022-11-21 09:44
本文目录一览：
- css轮播图怎么实现
- js还是css错了，轮播图点不动
- 网上下的图片轮播效果的css和js代码怎么弄到DW里？
- 纠结个问题、求大神帮忙解答、用css代替js做横向轮播图、当轮播时，over部分怎么写、
css轮播图怎么实现
很好写，首先定义轮播图容器，然后定义轮播图片。通过js来实现图片轮播。
js还是css错了，轮播图点不动
写代码要细心认真； 结论： 这段代码距离“轮播”还有不短的距离，请继续努力； 错的地方有：
init方法里面rightBn=document.getElementById("rightbn");init方法里面box_img=document.getElementById("box_img");//要注意横杠（box-img）和下划线（box_img）的区别 改完之后也只是满足了点击向右按钮，闪出下一张图而已；
网上下的图片轮播效果的css和js代码怎么弄到DW里？
不需要弄到DM里，存到你HTML目录里，引用即可。 假设你的WEB文件夹名字为www，HTML在根目录，那么你可以建一个文件夹把他们放进去，或者直接把这三个货和HTML放在一起。 如果是和HTML同一个目录，则：
<head>
你现有代码
<link href="style.css" rel="stylesheet" type="text/css" />
<!--上面一行是添加的-->
</head>
JS的话，建议放在尾部，也就是</body>之前即可。
<script type="text/jscript" src="jquery-1.3.1.min.js"></script>
<script type="text/jscript" src="slider.js"></script>
<!--上面两行是添加的-->
</body>
如果是不同目录，例如www目录下有index.html和新建了个的style文件夹，那么，把上面代码中src="后面加上/style/即可。
另外，看你的样子，是既有jquery特效，还有个幻灯轮播之类的，这两个JS说不定会有冲突哦~~
记得把jquery那个放前面，有时候就直接避免了冲突。
纠结个问题、求大神帮忙解答、用css代替js做横向轮播图、当轮播时，over部分怎么写、
我做的这个是立体的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;
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>
<script>
var a = 75834169102;
var b = 7287;
console.log(a % b);
</script>
</body>
</html>
