java 图片手动切换_原生javascript图片自动或手动切换示例附演示源码

一、效果图

 

二、html代码

.container, .container *{margin:0; padding:0;}

.container{width:408px; height:168px; overflow:hidden;position:relative;}

.slider{position:absolute;}

.slider li{ list-style:none;display:inline;}

.slider img{ width:408px; height:168px; display:block;}

.slider2{width:2000px;}

.slider2 li{float:left;}

.num{ position:absolute; right:5px; bottom:5px;}

.num li{

float: left;

color: #FF7300;

text-align: center;

line-height: 16px;

width: 16px;

height: 16px;

font-family: Arial;

font-size: 12px;

cursor: pointer;

overflow: hidden;

margin: 3px 1px;

border: 1px solid #FF7300;

backgrou