结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下: 1、点开html后,图片自动移动展示2、点击左右方向,可以改变 图片移动的方向(改变left的值,正负)3、鼠标移入移出图片后,图片暂停移动(setInterval,clearInterval)4、鼠标移到 ...
结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下:
1、点开html后,图片自动移动展示
2、点击左右方向,可以改变 图片移动的方向(改变left的值,正负)
3、鼠标移入移出图片后,图片暂停移动(setInterval,clearInterval)
4、鼠标移到图片上,高亮(a:hover)
5、点击小图, 下面的大图会改变
6、文字区域随着图片的变化而变化(未成功)
-----------------------------------------------------JS 代码-----------------------------------------------------------------
window.onload = function(){
//声明部分( 现在的习惯是要写什么声明什么, 一起写容易搞忘了。。也不知道好不好这样)
var oDiv = document.getElementById('box');
var oUl = oDiv.getElementsByTagName('ul');
var oLi = oUl.getElementsByTagName('li');
var speed = 2;
var timer = null;
//让ul的内容增一倍,从而实现无缝滚动
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';
//move函数
function move(){
原标题:JS 阶段小练习~ 无缝滚动
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。