<section id="slider">
<div id="inner-slide"></div>
<ul>
<li><a href="" onclick="moveslider(1);return false"> </a></li>
<li><a href="" onclick="moveslider(2);return false"> </a></li>
<li><a href="" onclick="moveslider(3);return false"> </a></li>
<li><a href="" onclick="moveslider(4);return false"> </a></li>
</ul>
</section>
section {
width:900px;
height:300px;
background: transparent url(1.jpg) 0 0 no-repeat;
}
#inner-slide{
width:900px;
height:300px;
position:absolute;z-index:1000;
}
section ul {list-style:none;margin:0;position:absolute;left:0;top:40px;width:800px;z-index:1001}
section ul li a {width:20px;height:20px;background:#fff;border:1px solid #333; margin:10px;float:left;}
@-webkit-keyframes slide-in { from { background-position: 900px 0;} to {background-position:0 0;}}
@-moz-keyframes slide-in { from { background-position: 900px 0;} to { background-position:0 0;}}
@-o-keyframes slide-in { from { background-position: 900px 0;} to { background-position:0 0;}}
@keyframes slide-in { from { background-position: 900px 0;} to {background-position: 0 0;}}
@-webkit-keyframes slide-out { from { background-position: 0 0;} to {background-position:-900px 0;}}
@-moz-keyframes slide-out { from { background-position: 0 0;} to {background-position: -900px 0;}}
@-o-keyframes slide-out { from { background-position: 0 0;} to {background-position:-900px 0;}}
@keyframes slide-out { from { background-position: 0 0;} to {background-position: -900px 0;}}
.in {
-webkit-animation: slide-in 2s linear 0s;
-moz-animation: slide-in 2s linear 0s;
-o-animation: slide-in 2s linear 0s;
animation: slide-in 2s linear 0s;
}
.out {
-webkit-animation: slide-out 2s linear;
-moz-animation: slide-out 2s linear;
-o-animation: slide-out 2s linear;
animation: slide-out 2s linear;
}
.back1 { background-image:url(1.jpg);background-repeat:no-repeat}
.back2 { background-image:url(2.jpg);background-repeat:no-repeat}
.back3 { background-image:url(3.jpg);background-repeat:no-repeat}
.back4 { background-image:url(4.jpg);background-repeat:no-repeat}
var toggle=0;
var current=1;
function moveslider(x){
if(toggle==0){
document.getElementById('slider').className='back'+current+' out';
document.getElementById('inner-slide').className='back'+x+' in';
document.getElementById('inner-slide').style.backgroundPosition="0 0";
toggle=1;
}else{
document.getElementById('inner-slide').className='back'+current+' out';
document.getElementById('slider').className='back'+(x)+' in';
document.getElementById('inner-slide').style.backgroundPosition="900px 0";
toggle=0;
}
current=x;
}
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)