仿flash实现图片轮换播放

<!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" />

<title>无标题文档</title>

<style>

    html,body,ul,img{margin:0;padding:0;color:#fff;}

    body{background:#666;}

    img{border:none;}

    li{list-style:none;}

    #playImages{width:400px;height:430px;background:#CCC;margin:50px auto;font:12px Arial;}

    #big_images{width:400px;height:320px;position:relative;}

    #big_images .prev,#big_images .next{position:absolute;top:131px;width:60px;height:58px; filter:alpha(opacity=0);opacity:0;z-index:101;}

    #big_images .prev{left:10px;background:url(images/left_btn.jpg);}

    #big_images .next{right:10px;background:url(images/right_btn.jpg);}

    #big_images .mark{position:absolute;bottom:0;left:0;width:400px;height:30px;background:#000;filter:alpha(opacity=50);opacity:0.5;z-index:102;}

    #big_images .text,#big_images .number{position:absolute;top:9px;z-index:102;}

    #big_images .text{left:0;}

    #big_images .number{right:0;}

    #big_images .mark_left,#big_images .mark_right{position:absolute;top:0;width:200px;height:320px;filter:alpha(opacity=0);opacity:0;cursor:pointer;z-index:100;}

    #big_images .mark_left{left:0;}

    #big_images .mark_right{right:0;}

    #big_images li{width:400px;height:320px;overflow:hidden;position:absolute;}/*①*/

    #big_images .active{z-index:1;}

    #big_images img{width:400px;height:320px;}

    #small_images{width:400px;height:110px;position:relative;overflow:hidden;}

    #small_images ul{position:absolute;height:110px;overflow:hidden;}

    #small_images li{float:left;padding-top:7px;padding-left:10px;filter:alpha(opacity=30);opacity:0.3;}

    #small_images img{width:120px;height:96px;}

    #small_images .active{filter:alpha(opacity=100);opacity:1;}

    /*说明：①/*需要加上绝对定位后面使用z-index才生效,这里只有加上overflow，height下拉渐变效果才能显示出来，因为在运动的过程中height是一点点变的，其他的部分需要隐藏才能显示出下拉渐变这种效果*/

*/

</style>

<script src="move.js"></script>

<script>

    function getClassName(oParent,sClass){

        var aEle = oParent.getElementsByTagName('*');

        var aResult = [];

        for(var i=0;i<aEle.length;i++){

            if(aEle[i].className == sClass){

                aResult.push(aEle[i]);

            }

        }

        return aResult;

    }

    window.onload = function(){

         var oDiv = document.getElementById('big_images');

         var oBtnPrev = getClassName(oDiv,'prev')[0];

         var oBtnNext = getClassName(oDiv,'next')[0];

         var oMarkLeft = getClassName(oDiv,'mark_left')[0];

         var oMarkRight = getClassName(oDiv,'mark_right')[0];

         var bigUl = oDiv.getElementsByTagName('ul')[0];

         var bigLi = bigUl.getElementsByTagName('li');

         var oSmallDiv = document.getElementById('small_images');

         var smallUl = oSmallDiv.getElementsByTagName('ul')[0];

         var smallLi = oSmallDiv.getElementsByTagName('li');

         var smallText = getClassName(oDiv,'text')[0];

         var smallNumber = getClassName(oDiv,'number')[0];

         var arrPicture =['图片一','图片号','图片3'];

         var iNow = 0;

         var imageZindex = 2;

         smallUl.style.width = (smallLi[0].offsetWidth*smallLi.length)+'px';

         init();

         var timer = null;

         clearInterval(timer);

         timer = setInterval(function(){

             iNow++;

             if(iNow == smallLi.length){

                 iNow = 0;

             }

             tab();

         },3000);

        //上面的左右按钮

         oBtnPrev.onmouseover = oMarkLeft.onmouseover = function(){

             startMove(oBtnPrev,'opacity',100);

         };

         oBtnPrev.onmouseout = oMarkLeft.onmouseout = function(){

              startMove(oBtnPrev,'opacity',0);

         };

         oBtnNext.onmouseover = oMarkRight.onmouseover = function(){

             startMove(oBtnNext,'opacity',100);

         };

         oBtnNext.onmouseout = oMarkRight.onmouseout = function(){

              startMove(oBtnNext,'opacity',0);

         };

        for(var i=0;i<smallLi.length;i++){

            smallLi[i].index = i;

            smallLi[i].onmouseover = function(){

                startMove(this,'opacity',100);

            };

            smallLi[i].onmouseout = function(){

                if(this.index != iNow){

                    startMove(this,'opacity',30);

                }

            };

            smallLi[i].onclick = function(){

                if(iNow == this.index){

                    return;

                }

                iNow = this.index;

                tab();

            };

        }

        oBtnPrev.onclick = function(){

            iNow--;

            if(iNow == -1){

                iNow = smallLi.length-1;

            }

            tab();

        };

        oBtnNext.onclick = function(){

            iNow++;

            if(iNow == smallLi.length ){

                iNow = 0;

            }

            tab();

        };

        function init(){

            smallText.innerHTML = arrPicture[iNow%arrPicture.length];

            smallNumber.innerHTML = iNow+1+'/'+smallLi.length;

        }

        function tab(){

            for(var j=0;j<smallLi.length;j++){

                startMove(smallLi[j],'opacity',30);

                bigLi[iNow].style.zIndex = 1;

            }

            startMove(smallLi[iNow],'opacity',100);

            bigLi[iNow].style.zIndex = imageZindex++;

            bigLi[iNow].style.height = 0;

            startMove(bigLi[iNow],'height',320);

            if(iNow ==0){

                startMove(smallUl,'left',0);

            }else if(iNow == smallLi.length-1){

                startMove(smallUl,'left',-(iNow-2)*smallLi[0].offsetWidth)

            }else{

                startMove(smallUl,'left',-(iNow-1)*smallLi[0].offsetWidth);

            }

            init();

        }

    };

</script>

</head>

<body>

<div id='playImages'>

    <div id='big_images'>

        <span class='prev'></span>

        <span class='next'></span>

        <div class="mark">

            <span class='text'>图片正在加载……</span>

            <span class='number'>计算图片数量……</span>

        </div>

        <a class='mark_left' href='javascript:;'></a>

        <a class='mark_right' href='javascript:;'></a>

        <ul>

            <li class='active'><img src = 'images/1.jpg'></li>

            <li><img src = 'images/2.jpg'></li>

            <li><img src = 'images/3.jpg'></li>

            <li><img src = 'images/4.jpg'></li>

            <li><img src = 'images/5.jpg'></li>

            <li><img src = 'images/6.jpg'></li>

            <li><img src = 'images/7.jpg'></li>

        </ul>

    </div>

    <div id='small_images'>

        <ul>

            <li class ='active'><img src = 'images/1.jpg'></li>

            <li><img src = 'images/2.jpg'></li>

            <li><img src = 'images/3.jpg'></li>

            <li><img src = 'images/4.jpg'></li>

            <li><img src = 'images/5.jpg'></li>

            <li><img src = 'images/6.jpg'></li>

            <li><img src = 'images/7.jpg'></li>

        </ul>

    </div>

</div>

</body>

</html>

仿flash实现图片轮换播放的更多相关文章

仿FLASH的图片轮换效果
css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...
JS 阶段练习~ 仿flash的图片轮换效果
结合了所学的简单运动框架~ 做这样一个综合小实例~~ -------------------------主要问题: 1.getByClassName IE低版的兼容性 2.DOM不够严谨 … 各种 ...
js图片轮换播放器
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
jQuery仿迅雷图片轮换效果
jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
Jquery实现图片轮换效果
最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...
基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
salesforce 零基础学习（六十一）apex:component简单使用以及图片轮转播放的实现
有的时候,我们项目有可能有类似需求:做一个简单的图像轮转播放功能,不同的VF页面调用可以显示不同的图片以及不同的图片描述.这种情况,如果在每个页面单独处理相关的图像轮转播放则显得代码特别冗余,此种情况 ...
js实现图片向上播放（轮番滚动）
js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...
JavaScript之图片轮换
<!doctype html> <title>javascript图片轮换</title> <meta charset="utf-8"/& ...

随机推荐

关于虚拟机VMware Tools安装中出现的无法自动安装VMCI驱动程序的问题
问题解决方法根据配置文件信息找到所在的虚拟机位置找到后缀名为vmx的文件,右键打开方式中选择使用记事本打开选择左上角编辑中的查找功能输入图中的查找内容后,点击查找下一个将其原先的TRUE值改 ...
[LC] 150. Evaluate Reverse Polish Notation
Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...
一分钟搞定pychram远程调试和同步代码
首先说一下需求,否则很多人都不知道pycharm这个远程同步和调试到底是干嘛使的. 需求很简单,我想要在本地的windows机器上跑一个程序,但是程序运行会加载一些很占内存的树型数据结构,称其为tre ...
leetcode笔记——35.搜索插入位置 - CrowFea
0.问题描述给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 12 输入: [1,3 ...
玩转iOS开发：iOS中的GCD开发(三)
上一章, 我们了解到了GCD里的一些队列和任务的知识, 也实践了一下, 同时我们也对主队列的一些小情况了解了一下, 比如上一章讲到的卡线程的问题, 如果没有看的朋友可以去看看玩转iOS开发:iOS中的 ...
Vue Zero · 啟
其实,一开始我应聘的是Spark,Hadoop这样的,然后后面呢,发现只有Java的业务给我写了,再后面我发现,公司招不到前端,所以前端要由后端来写,刺激!!! 数据驱动首先要明白一个概念,那就是D ...
Hackintosh Of Lenovo R720 15IKBN
Hackintosh Of Qftm 一个黑苹果爱好者的项目定制:macOS Catalina 10.15.1 电脑配置一键查看电脑配置(鲁大师.360驱动管理.Lenovo管家等) 规格详细信 ...
Python2.7错误处理FileNotFoundError报错NameError: name 'FileNotFoundError' is not defined
错误信息如下: 原因是FileNotFoundError是python3.0中的写法,而Python2.7中应写为IOError.
11--PHP中的类和对象
PHP类和对象类是面向对象程序设计的基本概念,通俗的理解类就是对现实中某一个种类的东西的抽象, 比如汽车可以抽象为一个类,汽车拥有名字.轮胎.速度.重量等属性,可以有换挡.前进.后退等操作方法. 通 ...
scrapy爬虫-代理IP中间件
class ProxyDownloaderMiddleware(object): # Not all methods need to be defined. If a method is not de ...

仿flash实现图片轮换播放

仿flash实现图片轮换播放的更多相关文章

随机推荐

热门专题