With HTML5, CSS3 implementation of the super simple slide, scrolling with the mouse wheel for page change.
<!doctype html> <html> <head> <title></title> <style> #slides {
Position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
Overflow:hidden;
}. slide{Position:absolute;
height:600px;
width:800px;
opacity:0.7;
Background-color:rgba (0, 128, 196, 0.5)!important;
Background-color: #ccc;
border-radius:10px;
left:50%;
top:50%;
margin-top:-300px;
box-shadow:5px 5px 5px rgba (0, 0, 0, 0.5);
Transition:all 0.25s ease-in-out 0s;
}. current{opacity:1;
margin-left:-400px;
}. future{margin-left:450px;
Transform:skew ( -3deg) scale (0.8); -webkit-transform:skew ( -3deg) scale (0).8);
}. post{margin-left:-1250px;
Transform:skew (3deg) scale (0.8);
-webkit-transform:skew (3deg) scale (0.8);
}. far-future{margin-left:1200px;
Transition:none; }</style></head><body><div id= "Slides" ><div class= "Slide Current" >1</div>< Div class= "Slide Future" >2</div><div class= "slide far-future" >3</div><div class= "slide Far-future ">4</div><div class=" slide far-future ">5</div><div class=" slide Far-future ">6" </div><div class= "Slide Far-future" >7</div></div><script>!function () {var slides = document.getElementById ("Slides"). Childnodes;var L = slides.length; function Fslide (e) {var event = e | | window.event;//console.log (Event.wheeldelta + "" + event.detail); for (Var i=0;i<l;i++) {if (slides[i].classname== ' slide current ') {var current_slide = slides[i]; break;}} var curRent_slide = Document.getelementsbyclassname ("current") [0];//Getelementsbyclassname only Firefox, newer versions of browsers such as Google support if ( Event.wheeldelta < 0/*ie, Google and other browsers * | | Event.detail > 0/*firefox*/) && Nextel (Current_slide)) {if (Prevel (current_slide)) {prevel (current_slide). Classname= "Slide Far-future"; }current_slide.classname= "Slide Post"; Nextel (Current_slide). Classname= "Slide Current";
if (Nextel (Nextel (Current_slide))) {Nextel (Nextel (Current_slide)). Classname= "Slide Future"; else if ((Event.wheeldelta > 0 | | event.detail < 0) && Prevel (current_slide)) {if (Nextel (Current_slide)) { Nextel (Current_slide). Classname= "Slide Far-future"; } current_slide.classname= "Slide Future";
Prevel (current_slide). Classname= "Slide Current"; if (Prevel (Prevel (current_slide))) {Prevel (Prevel (Current_slide)). Classname= "Slide Post"}}} Document.onmousewheel =
Fslide;
ie, Google and other browsers if (Document.addeventlistener) {Document.addeventlistener ("Dommousescroll", Fslide,false); Firefox}} (); function Prevel (EL) {if (el.previoussibling = null) return null; return el.previousSibling.nodeType = 1? el.previoussib
Ling:prevel (el.previoussibling); function Nextel (EL) {if (el.nextsibling = null) return null; return el.nextSibling.nodeType = 1? el.nextSibling:ne
Xtel (el.nextsibling); } </script> </body> </html>