用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;
}
}
这个还有些问题，有人知道请告诉我！
