1.全屏滚动选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<style type="text/css">
*{
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;
}
</style>
</head>
<body>
<div style="background: red;"></div>
<div style="background: blue;"></div>
<div style="background: pink;"></div>
<div style="background: green;"></div>
<div style="background: gray;"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script type="text/javascript">
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';
}
</script>
</html>
2.轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播</title>
<style>
*{
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;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<ul>
<li><img src="01.jpg"/></li>
<li><img src="02.jpg"/></li>
<li><img src="01.jpg"/></li>
<li><img src="01.jpg"/></li>
</ul>
</div>
</div>
<script>
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();
</script>
</body>
</html>
网友评论