基于javascript实现图片切换效果

　　*{

　　margin: 0;

　　padding: 0;

　　}

　　.box{

　　width: 800px;

　　height: 400px;

　　margin: 20px auto;

　　position: relative;

　　overflow: hidden;

　　}

　　.img_box{

　　height: 400px;

　　width: 3200px;

　　position: absolute;

　　-moz-transition: 0.5s;

　　-webkit-transition: 0.5s;

　　}

　　img{

　　width: 800px;

　　height: 400px;

　　float: left;

　　}

　　.switch{

　　width: 200px;

　　height: 100%;

　　position: absolute;

　　}

　　#left{

　　left: 0px;

　　top: 0px;

　　background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

　　background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

　　}

　　#right{

　　right:0px;

　　top: 0px;

　　background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));

　　background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));

　　}

　　#left:hover{

　　background: -moz-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));

　　background: -webkit-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));

　　}

　　#right:hover{

　　background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));

　　background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));

　　}