你的位置:首页 > 软件开发 > Java > JS 阶段练习~ 仿flash的图片轮换效果

JS 阶段练习~ 仿flash的图片轮换效果

发布时间:2015-12-22 16:00:03
结合了所学的简单运动框架~ 做这样一个综合小实例~~-------------------------主要问题:1、getByClassName IE低版的兼容性2、DOM不够严谨 … 各种跳出和bug3、实现方法麻烦~ 代码完全与精简不挨 ...

JS 阶段练习~ 仿flash的图片轮换效果

结合了所学的简单运动框架~  做这样一个综合小实例~~

-------------------------主要问题:

1、getByClassName  IE低版的兼容性

2、DOM不够严谨 … 各种跳出和bug

3、实现方法麻烦~  代码完全与精简不挨边……

-------------------------解决方法:

    - - 目前只能做到这样,慢慢学,慢慢进步了~ 

 

-------------------------要实现功能如下:

1、鼠标移入大图,左右按钮显示(控制opaicty)

2、当前显示的大图,对应小图全显,其他为半透明(控制opacity)

3、每张切换的大图窗格切换效果  (控制height运动)

4、小图的滚动播放,大图跟随(小图整个部分left的值)

5、自动播放,鼠标移入移出,停止 继续~(setInterval)

 

JS 阶段练习~ 仿flash的图片轮换效果

大致布局:

由外到内allWrap  从上到下topWrap  bottomWrap

topWrap里div里放大图, 按钮和其他显隐单独布出

bottomWrap里给个不设宽的ul~   让其宽度为li宽度*li的个数

------------------------------------------------------   javascript代码如下    --------------------------------

//这是上次的综合运动框架~  就不再写了

<script src='/images/loading.gif' data-original="js/sports.js"></script>

原标题:JS 阶段练习~ 仿flash的图片轮换效果

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。