css+js輪播圖,如何用css實現輪播圖

本文目錄一覽：

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做橫向輪播圖、當輪播時，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);