<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script src="move.js" >

        function getByClass(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('playimages');

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

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

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

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

            var oDivSmall = getByClass(oDiv, 'small_pic')[0];

            var oUiSmall = oDivSmall.getElementsByTagName('ul')[0];

            var aLiSmall = oDivSmall.getElementsByTagName('li');

            var oUlBig = getByClass(oDiv, 'big_pic')[0];

            var aLiBig = oUiBig.getElementsByTagName('li');

            var nowZIndex = 2;

            var now = 0;

            oUiSmall.style.width = aLiSmall.length * aLiSmall[0].offsetWidth + 'px';

            //左右按钮

            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 < aLiSmall.length; i++) {

                aLiSmall[i].index = i;

                aLiSmall[i].onclick = function () {

                    if (this.index == now) return;

                    now = this.index;

                    tab();

                };

                aLiSmall[i].onmouseover = function () {

                    startMove(this, 'opacity', 100);

                };

                aLiSmall[i].onmouseout = function () {

                    if (this.index != now) {

                        startMove(this, 'opacity', 60);

                    }

                };

            }

            function tab()

            {

                aLiBig[now].style.zIndex = nowZIndex++;

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

                    startMove(aLiSmall[i], 'opacity', 60);

                }

                startMove(aLiSmall[now], 'opacity', 100);

                aLiBig[now].style.height = 0;

                startMove(aLiBig[now], 'height', 320);

                if (now == 0)

                {

                    startMove(oUiSmall, 'left', 0);

                }

                else if (now == aLiSmall.length - 1)

                {

                    startMove(oUiSmall, 'left', -(now - 2) * aLiSmall[0].offsetWidth);

                }

                else

                {

                    startMove(oUiSmall, 'left', -(now - 1) * aLiSmall[0].offsetWidth);

                }

            }

            oBtnPrev.onclick = function () {

                now--;

                if(now==-1)

                {

                    now = aLiSmall.length - 1;

                }

                tab();

            };

            oBtnNext.onclick = function () {

                now++;

                if(now==aLiSmall.length)

                {

                    now = 0;

                }

                tab();

            };

            var timer=setInterval(oBtnNext.onclick, 2000);

            oDiv.onmouseover = function () {

                clearInterval(timer);

            };

            oDiv.onmouseout = function () {

                timer = setInterval(oBtnNext.onclick, 2000);

            };

        };

    </script>

</head>

<body>

    <div id="playimages" class="play">

        <ul class="big_pic">

            <div class="prev"></div>

            <div class="new"></div>

            <div class="text">加载图片说明......</div>

            <div class="length">计算图片数量......</div>

            <a class="mark_left" href="javascipt:;"></a>

            <a class="mark_right" href="javascipt:;"></a>

            <div class="bg"></div>

            <li style="z-index:1;"><img src="data:images/1.jpg" /></li>

            <li><img src="data:images/2.jpg" /></li>

            <li><img src="data:images/3.jpg" /></li>

            <li><img src="data:images/4.jpg" /></li>

            <li><img src="data:images/5.jpg" /></li>

            <li><img src="data:images/6.jpg" /></li>

        </ul>

        <div class="small_pic">

            <ul style="width:390px;">

                <li style="filter:100; opacity:1;"><img src="data:images/1.jpg" /></li>

                <li><img src="data:images/2.jpg" /></li>

                <li><img src="data:images/3.jpg" /></li>

                <li><img src="data:images/4.jpg" /></li>

                <li><img src="data:images/5.jpg" /></li>

                <li><img src="data:images/6.jpg" /></li>

            </ul>

        </div>

    </div>

</body>

</html>

js图片轮换播放器的更多相关文章

  1. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  2. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  3. HTML+纯JS制作音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...

  4. 黄聪：原生js的音频播放器，兼容pc端和移动端（原创）

    更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...

  5. JS控制Video播放器(快进、后退、播放、暂停、音量大小)

    思路: 一.首先监听触发事件. 比如:向上键对应的keyCode为38,向下键对应的keyCode为40,向左键对应的keyCode为37,向右键对应的keyCode为39,空格键对应的keyCode ...

  6. 阿里云oss视频上传不能在线播放,js,javascript,在线播放器,插件

    网页视频播放插件 发现阿里云oss储存,上传了视频不能在线播放. 解决方法:使用插件播放即可解决. <html> <head> <meta charset="u ...

  7. 仿flash实现图片轮换播放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS图片轮换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. video.js 后端网页播放器

    参考链接: https://www.cnblogs.com/afrog/p/6689179.html VideoJS的CSS样式,这里我提供一下BootCdn的链接 cdn.bootcss.com/v ...

随机推荐

  1. C语言 strlen

    C语言 strlen #include <string.h> size_t strlen(const char *s); 功能:计算指定指定字符串s的长度,不包含字符串结束符‘\0’ 参数 ...

  2. Java学习笔记(九)面向对象---模板方法设计模式

    理解 在定义功能时功能的一部分是确定的,但是有一部分是不确定的,而确定的部分在使用不确定的部分,那么就将不确定的部分暴露出去,由该类的子类完成. 举例 需求 获取一段程序的运行时间 代码 abstra ...

  3. Chrome下ifame父窗口调用子窗口的问题

    function changeMenu(menu_id){ frames[0].changeMenu(menu_id); } https://blog.csdn.net/caohaicheng/art ...

  4. 2.5 【配置环境】多浏览器驱动 （chrome、IE、Firefox）❀

    来源:http://blog.csdn.net/huilan_same/article/details/51896672 http://www.cnblogs.com/thinkCoding/p/64 ...

  5. js中yyyymmdd hh:mm:ss字符转换为Date

    var dateString="20190102 10:30:35"; var pattern = /(\d{4})(\d{2})(\d{2})/; var formatedDat ...

  6. 题解【洛谷P5436】【XR-2】缘分

    题目背景 世间万物都置身于缘分编织的大网中.缘分未到,虽历经千劫,却不能相遇.缘分到了,在草原上都能等到一艘船.--<一禅小和尚> 题目描述 一禅希望知道他和师父之间的缘分大小.可是如何才 ...

  7. tableSizeFor()函数在java8和Java13的差别

    java8 static final int tableSizeFor(int cap) { int n = cap - 1; n |= n >>> 1; n |= n >&g ...

  8. CentOS7重启和关机

    重启命令: 1.reboot 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 10 过10分钟自动重启(root用户使用) 4.shutdown -r 2 ...

  9. 萌新深度学习与Pytorch入门记录（一）：Win10下环境安装

    深度学习从入门到入土,安装软件及配置环境踩了不少坑,过程中参考了多处博主给的解决方法,遂整合一下自己的采坑记录. (若遇到不一样的错误,请参考其他博主答案解决) 笔者电脑系统为win10系统,在此环境 ...

  10. 6_3 矩阵链乘（UVa424）<用栈实现简单的表达式解析>

    假设你必须做A*B*C*D*E的运算,在这里A,B,C,D,E都是矩阵(matrix).由于矩阵相乘具有连接性(associative),所以相乘的顺序可以是任意的.然而所需要的基本乘法数却与不尽相同 ...