1.全屏滚动选项卡
*{
padding: 0;
margin: 0;
}
ul{
position: fixed;
right: 10px;
bottom :200px;
}
li{
width: 20px;
height: 20px;
border-radius: 10px;
border:1px solid black;
font-size: 15px;
list-style: none;
text-align: center;
background: white;
margin: 10px;
cursor: pointer;
}
- 1
- 2
- 3
- 4
- 5
var aDiv = document.getElementsByTagName('div');
var oUl = document.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
[...aDiv].forEach(function(item,i){
item.style.height = document.documentElement.clientHeight + 'px';
});
[...oLi].forEach(function(item,i){
item.onclick = function(){
console.log(i);
document.documentElement.scrollTop = aDiv[0].offsetHeight*5 - aDiv[0].offsetHeight*(oLi.length - i) ;
toRed(item);
}
});
document.body.onwheel = function(ev){
ev.preventDefault();
if(ev.deltaY>0){
document.documentElement.scrollTop+=aDiv[0].offsetHeight
}else{
document.documentElement.scrollTop -=aDiv[0].offsetHeight;
}
}
window.onscroll = function(){
var l =document.documentElement.scrollTop;
if(l<=aDiv[0].offsetHeight/2){
toRed(oLi[0])
}else if(l>aDiv[0].offsetHeight/2&&l<=aDiv[0].offsetHeight*1.5){
toRed(oLi[1])
}else if(l>aDiv[0].offsetHeight*1.5&&l<=aDiv[0].offsetHeight*2.5){
toRed(oLi[2])
}else if(l>aDiv[0].offsetHeight*2.5&&l<=aDiv[0].offsetHeight*3.5){
toRed(oLi[3])
}else if(l>aDiv[0].offsetHeight*3.5){
toRed(oLi[4])
}
}
function toRed(ele){
[...oLi].forEach(function(item,i){
item.style.background = 'white';
})
ele.style.background = 'red';
}
2.轮播图
*{
padding:0;
}
#outer{
width:320px;
height:215px;
overflow:hidden;
position:relative;
}
#inner{
width:1280px;
height:215px;
position:absolute;
}
ul{
list-style:none;
}
ul li{
float:left;
}
img{
width:320px ;
height: 215px;
}
function Lunbo(){
this.left=0;
this.t=null;
this.run();
}
Lunbo.prototype={
run(){
var _this=this;
this.t=setInterval(function(){
_this.left-=10;
if(_this.left<-960){
_this.left=0;
}
if(_this.left%320==0){
clearInterval(_this.t);
setTimeout(function(){
_this.run()
},2000)
}
document.getElementById("inner").style.left=_this.left+"px";
},100)
}
}
var lunbo=new Lunbo();