您的位置：首页 > Web前端 > JavaScript

无缝图片滚动

2014-07-26 19:47 246 查看

初入javascript，做了无缝图片滚动来提高实践能力，还有不足之处请见谅。

事件处理

onload//页面或图片加载完后触发

onclick//点击触发

onmouseover//鼠标进入元素区域触发

onmouseout//鼠标移出晕元素区域触发

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
li{
list-style-type:none;
float:left;
}
#pictureweizhi{
height:300px;
width:300px;
border:1px solid #999;
overflow:hidden;
}
#radioweizhi{

margin-top:10px;
}
ul{
margin:0px;
padding-left:0px;
}
</style>
<title></title>
</head>

<body onload="jiazai()">
<div id="pictureweizhi" onmouseover="mouseenter()" onmouseout="yc()">
<div style=" width:800%; border:1px solid #999;">
<div id="tpc" style="float:left;" >
<ul>
<li><img src="https://img-blog.csdn.net/20140726194428875?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjk4ODk2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
</li>
<li><img src="https://img-blog.csdn.net/20140726194746824?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjk4ODk2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
</li>
<li><img src="https://img-blog.csdn.net/20140726194756793?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjk4ODk2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
</li>
<li><img src="https://img-blog.csdn.net/20140726194536062?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjk4ODk2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
</li>
</ul>
</div>
</div>
<div id="fangxiang1" style="height:30px;width:30px;position:absolute; top:150px;cursor:pointer;" onclick="fxtz(-1)">
<img  src="https://img-blog.csdn.net/20140726194810739?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjk4ODk2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
</div>
<div id="fangxiang2" style="height:30px;width:30px; position:absolute; top:150px;left:280px; cursor:pointer; " onclick="fxtz(1)">
<img  src="https://img-blog.csdn.net/20140726194816667?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjk4ODk2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Cente" />
</div>
</div>
<div id="radioweizhi">
<input type="radio" id="radio0"  name="ra" onclick="tptz(0)"/>
<input type="radio" id="radio1"  name="ra" onclick="tptz(1)"/>
<input type="radio" id="radio2"  name="ra" onclick="tptz(2)"/>
<input type="radio" id="radio3"  name="ra" onclick="tptz(3)"/>
</div>
</body>
</html>
<script>
var no=0;
var last=0;
var lastradio;//上一个被选中的radio
var fxj1;
var fxj2;
function jiazai()//加载时运行
{
var radio = document.getElementById("radio0");
radio.setAttribute("checked","checked");
mouseleave();
lastradio = radio;
fxj1=document.getElementById("fangxiang1");
fxj2=document.getElementById("fangxiang2");
fxj1.style.display="none";
fxj2.style.display="none";
}
function tptz(num)//支持radio的图片跳转
{
no=num;
if(last != num)
{
if(last < num)
ff(1,num);
if(last > num)
ff(-1,num);
last=num;
}
}
var distance;
var ff=function(dir,tj)
{
distance=0;
clearInterval(ff.interval);
var div2 = document.getElementById("tpc");
var div1 = document.getElementById("pictureweizhi");
ff.obj1=div1;
ff.obj2=div2;
ff.interval=setInterval('move('+dir+','+tj+')',1);
}
function move(dir,tj)
{

if(dir == 1)
{
if(ff.obj1.scrollLeft < tj*300)
ff.obj1.scrollLeft+=10*dir;
}
else
{
if(ff.obj1.scrollLeft > tj*300)
ff.obj1.scrollLeft+=10*dir;
}
}
function mouseleave()
{
mouseleave.interval=setInterval('dstp()',3000);
}
function mouseenter()
{
clearInterval(mouseleave.interval);//清楚之前的定时器，不然速度回越来越快
fxj1.style.display="block";
fxj2.style.display="block";
}
function dstp()//定时跳转图片
{

no++;
if(no>=4)//增加图片要改
no=0;
lastradio.checked=false;
var radio = document.getElementById("radio"+no+"");
radio.checked=true;
lastradio=radio;
tptz(no);
}
function fxtz(fx)//方向键跳转图片
{
var num;
num=last+fx;
if(num<0)
num=3;//增加图片要改
if(num>3)
num=0;//增加图片和要改
lastradio.checked=false;
var radio = document.getElementById("radio"+num+"");
radio.checked=true;
lastradio=radio;
tptz(num);
}
function yc()//隐藏方向键
{
mouseleave();
fxj1.style.display="none";
fxj2.style.display="none";
}
</script>

技术有限！！！！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript css html

相关文章推荐

新的分享

章节导航