css+js轮播图,如何用css实现轮播图

更新：2022-11-21 09:44

本文目录一览：

1、css轮播图怎么实现
2、js还是css错了，轮播图点不动
3、网上下的图片轮播效果的css和js代码怎么弄到DW里？
4、纠结个问题、求大神帮忙解答、用css代替js做横向轮播图、当轮播时，over部分怎么写、

css轮播图怎么实现

很好写，首先定义轮播图容器，然后定义轮播图片。通过js来实现图片轮播

js还是css错了，轮播图点不动

写代码要细心认真；

结论：这段代码距离“轮播”还有不短的距离，请继续努力；

错的地方有：

1 init方法里面 rightBn=document.getElementById("rightbn");

2 init方法里面 box_img=document.getElementById("box_img"); //要注意横杠（box-img）和下划线（box_img）的区别

改完之后也只是满足了点击向右按钮，闪出下一张图而已；

网上下的图片轮播效果的css和js代码怎么弄到DW里？

不需要弄到DM里，存到你HTML目录里，引用即可。

假设你的WEB文件夹名字为www，HTML在根目录，那么你可以建一个文件夹把他们放进去，或者直接把这三个货和HTML放在一起。

如果是和HTML同一个目录，则：

CSS在head/head中间调用，也就是把下面这一句放到中间。

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轮播图,如何用css实现轮播图

纠结个问题、求大神帮忙解答、用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;

/*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;

}

.d1div{

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);