html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）

用js和CSS写图片切换效果(轮播图)、

** 学习前提**

了解CSS伪类元素，css3过度效果

对js拥有基础的了解。

清楚图片切换原理。

CSS3轮播图

body{

background:#ccc;

}

#wrap{

width:640px;

margin:100px auto;

position:relative;

padding-top:320px;

overflow: hidden;

}

#wrap>img{

position:absolute;left:0px;top:0px;

transition:all 1s;

}

img{

display:block;

}

input{

display:none;

}

label{

border:2px solid #aaa;

margin:20px 3px;

float:left;

width: 10px;

}

input:checked + label{

border:8px solid #fff;

opacity:1;

}

input ~ img{

opacity:0;

transform:scale(1.1);

}

input:checked + label + img{

opacity:1;

transform:translate(0px);

}

.before

{

width: 50px;

height: 320px;

position: absolute;

top:0px;

left:0px;

z-index:2;

background: rgb(126, 131, 120, 0.31);

border: none;

outline: none;

}

.after

{

width: 50px;

height: 320px;

position: absolute;

top:0px;

right:0px;

z-index:2;

background: rgb(126, 131, 120, 0.31);

border:none;

outline: none;

}

.before:active{

boeder:none;

}

1

2

3

4

5

前

后

var wrap = new Array();

var wp=document.getElementById("wrap");

var before =document.getElementById("before");

var after = document.getElementById("after");

for(var i =1;i<=5;i++)

{

wrap[i]=document.getElementById("id"+i);

}

var j=1;

function changeImg() {

ba(j);

if (j==wrap.length)

{

j=0;

}

else

{

wrap[j].click();

}

j++;

}

var run=setInterval(changeImg,2000);//每秒重置该函数

wp.οnmοusemοve=function () {

clearInterval(run);

}

wp.οnmοuseοut=function(){

run=setInterval(changeImg,2000);

}

function ba(j) {

var i,k;

i=j;

k=j;

before.οnclick=function () {

if(i==wrap.length)

{

i=5;

}

else if(i==1)

{

i=6;

}

i--;

wrap[i].click();

}

after.οnclick=function () {

if(k==wrap.length)

{

k=0;

}

++k;

wrap[k].click();

}

return j;

}

function eventclick(self) {

var id =self;

if (id=="d1")

{

j=1;

}

if (id=="d2")

{

j=2;

}

if (id=="d3")

{

j=3;

}

if (id=="d4")

{

j=4;

}

if (id=="d5")

{

j=5;

}

}

这个还有些问题，有人知道请告诉我！