轮廓图的点击效果，欢迎一起来探讨
标签：
JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
width:800px;
height:100px;
background: red;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#div1 ul{
position: absolute;
top:0;
left: 0;
}
#div1 ul li{
height: 100px;
float: left;
list-style: none;
}
</style>
<script>
window.onload=function()
{
var odiv=document.getElementById('div1');
var uu=odiv.getElementsByTagName('ul')[0];
var ll=uu.getElementsByTagName('li');
var timer=null;
var speed=2;
uu.innerHTML=uu.innerHTML+uu.innerHTML;
uu.style.width=ll[0].offsetWidth*ll.length+'px';
function move(){
if(uu.offsetLeft<-uu.offsetWidth/2)
{
uu.style.left='0';
}
if(uu.offsetLeft>0)
{
uu.style.left=-uu.offsetWidth/2+'px'
}
uu.style.left=uu.offsetLeft+speed+'px';
}
var timer=setInterval(move,30)
odiv.onmouseover=function()
{
clearInterval(timer);
}
odiv.onmouseout=function()
{
timer=setInterval(move,30)
}
document.getElementsByTagName('a')[0].onclick=function(){
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function(){
speed=2;
}
}
</script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img2/1.jpg"></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img2/2.jpg"></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img2/3.jpg"></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img2/4.jpg"></li>
</ul>
</div>
</body></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦