页面框架
<div id="banner">
<div id="box">
<div id="list">
<img id="pic" src="1.jpg"/>
</div>
<a href="javascript:;" id="left"> < </a>
<a href="javascript:;" id="right"> > </a>
</div>
<ul id="list1">
<li class="li"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
css排版
#banner{
position: relative;
}
#list{
width:100%;
height:100%;
margin: 0px auto;
}
#list img{
display: block;
}
#list1{
position: absolute;
bottom: 10px;
left: 80%;
margin-left: -75px;
transition: opacity .s linear
}
#list1 li{
list-style: none;
width: 20px;
height: 20px;
border-radius: 20px;
background: #000;
opacity: .4;
filter: alpha(opacity = 40) ;
float: left;
margin-left:10px ;
cursor: pointer;
}
#banner a{
display: block;
width: 60px;
height: 60px;
background: #000;
opacity: .4;
position: absolute;
top: 50%;
margin-top: -30px;
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 60px;
text-align: center;
}
#left{
left: 0%;
}
#right{
right: 0%;
}
#list1 .li{
background: #f40;
}
#box{
width:100%;
height:100%;
margin: 0 auto;
}
#pic{
width:100%;
height:400px;
margin: 0 auto;
}
js代码
<script type="text/javascript">
var oList = document.getElementById("list");
var oList1 = document.getElementById("list1");
var oLi = document.getElementsByTagName(\'li\');
var oPic = document.getElementById("pic");
var Left = document.getElementById("left");
var Right = document.getElementById("right");
var box = document.getElementById("box");
num = 1;
var timer = setInterval(function(){
num++;
if(num>5){
num=1;
}
fn();
},2000)
oList.onmouseout = function(){
timer = setInterval(function(){
num++;
if(num>5){
num=1;
}
fn();
},2000)
}
box.onmouseover = function(){
clearInterval(timer);
}
Right.onclick = function()
{
num++;
if(num>5){
num =1;
}
fn();
}
Left.onclick = function()
{
num--;
if(num<1){
num = 5;
}
fn();
}
for (var i=0;i<oLi.length;i++) {
oLi[i].index = i;
oLi[i].onclick = function(){
num = this.index+1;
fn();
}
}
function fn(){
oPic.src = num + ".jpg";
for (var i=0;i<oLi.length;i++) {
oLi[i].className = \'\';
if(num == i+1){
oLi[i].style.background = \'#f40\';
}else{
oLi[i].style.background = \'\';
}
}
}
</script>