废话不多说,直接上代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
margin: 100px auto;
width: 670px;
height: 320px;
/*border:1px solid red;*/
position: relative;
}
.box1 ul li {
list-style: none;
width: 670px;
height: 320px;
/*display: none;*/
position:absolute;
opacity:0;
}
.box1 ul li.cur1{
opacity:1;
filter:alpha(opacity=0);
}
.box1 ul li img {
width: 670px;
height: 320px;
}
.box2 {
position: absolute;
width: 100%;
top: 50%;
margin-top: -27px;
left: 0;
cursor: pointer;
z-index: 3;
}
.box2 .left {
float: left;
width: 55px;
height: 55px;
background: url(images/slide-btnL.png);
}
.box2 .right {
float: right;
width: 55px;
height: 55px;
background: url(images/slide-btnR.png);
}
.box1 ol {
position:absolute;
left:50%;
margin-left: -68px;
bottom: 10px;
width: 135px;
}
.box1 ol li {
list-style: none;
float: left;
width: 7px;
height: 7px;
border-radius: 6px;
background: url(images/ico.png) no-repeat -138px -133px;
margin: 0 10px;
cursor: pointer;
}
.box1 ol li.cur2 {
background: url(images/ico.png) no-repeat -125px -133px;
}
</style>
</head>
<body>
<div class="box1" id="box1">
<ul>
<li class="cur1"><a href="#"><img src="images/aaa.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/bbb.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/ccc.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/ddd.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/eee.jpg" alt=""/></a></li>
</ul>
<div class="box2">
<span class="left"></span>
<span class="right"></span>
</div>
<ol>
<li class="cur2"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script src="js/animate.js"></script>
<script>
// 1/获取元素
var box1 = document.getElementById("box1");
var ullis = box1.children[0].children;
var spans = box1.children[1];
var leftArr=spans.children[0];
var rightArr=spans.children[1];
var ollis = box1.children[2].children;
//事件监听
var count=0;
var timer=null;
for (var i = 0; i < ollis.length; i++) {
ollis[i].index=i;
ollis[i].onclick= function () {
for(var i = 0; i < ollis.length; i++){
ollis[i].className="";
animate(ullis[i],{"opacity":0})
}
ollis[this.index].className="cur2";
count=this.index
animate(ullis[count],{"opacity":1})
}
}
rightArr.onclick=function (){
if(ullis[count].isanimate) return;
animate(ullis[count],{"opacity":0});
count++;
if(count>=ullis.length){
count=0;
}
for (var i = 0; i < ullis.length; i++) {
ollis[i].className = "";
}
ollis[count].className = "cur2";
animate(ullis[count],{"opacity":1});
}
leftArr.onclick=function (){
if(ullis[count].isanimate) return;
animate(ullis[count],{"opacity":0});
count--;
if(count<0){
count=ullis.length-1;
}
for (var i = 0; i < ullis.length; i++) {
ollis[i].className = "";
}
ollis[count].className = "cur2";
animate(ullis[count],{"opacity":1});
}
box1.onmouseover=function(){
clearInterval(timer);
}
box1.onmouseout=function(){
autoMove();
}
autoMove()
function autoMove(){
clearInterval(timer);
timer=setInterval(function(){
rightArr.click();
},1500)
}
</script>
</body>
</html>
/**animate.js
* Created by tiger.
*/
function animate(tag,obj,fn){
clearInterval(tag.timer);
tag.isanimate=true;
tag.timer=setInterval(function () {
var flag=true;
for(var k in obj){
if(k=="opacity"){
var target=obj[k]*100;
var leader=getStyle(tag,k)*100||0;
var step=(target-leader)/20;
step=step > 0 ?Math.ceil(step): Math.floor(step);
leader=leader+step;
tag.style[k]=leader/100;
tag.style.filter="alpha(opacity=" + leader + ")";
}else if(k=="zIndex"){
target.style.zIndex=obj[k];
}else{
var target=obj[k];
var leader=getStyle(tag,k);
var step=(target-leader)/10;
step=step > 0 ?Math.ceil(step): Math.floor(step);
leader=leader+step;
tag.style[k]=leader+"px";
}
if(target!=leader){
flag=false
}
}
if(flag){
clearInterval(tag.timer);
tag.isanimate=false;
fn&&fn();
}
},40)
}
function getStyle(tag,attr){
if(tag.currentStyle){
return tag.currentStyle[attr];
}else{
return getComputedStyle(tag, null)[attr];
}
}