<!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. command failed: npm install --loglevel error --registry=https://registry.npm 用vue-cli 4.0 新建项目总是报错

    昨天新买的本本,今天布环境,一安装vue-cli发现都4.0+的版本了,没管太多,就开始新建个项目感受哈,一切运行顺利,输入 "vue create app" 的时候,一切貌似进展 ...

  2. 在x64的Ubuntu系统下安装64bit的交叉编译工具aarch64-linux-gnu-gcc【转】

    sudo apt-cache search aarch64 查看哪些版本可以安装: sudo apt--aarch64-linux-gnu 安装一个gcc开头的5版本的支持64bit ARM linu ...

  3. 百炼OJ - 1002 - 方便记忆的电话号码

    题目链接 思路 开个一千万的数组计数,最后遍历即可. #include<stdio.h> #include<string.h> #include<algorithm> ...

  4. 刷题3. Longest Substring Without Repeating Characters

    一.题目 Longest Substring Without Repeating Characters,具体请自行搜索. 这个题目,我看了一下,经过一番思考,我觉得实现起来不是很复杂. 但要做到bug ...

  5. python如何用sqlalchemy操作数据库

    工具:mysql  python sqlalchemy ---------------------------------------- 准备工作: 1.安装mysql 如果是window环境请参考 ...

  6. Java-POJ1002-487-3279(含c++代码)

    Java 的读入还不熟练,解决不了空行的问题,还是只能用c++ A掉,唉~ 之后要把这个坑补掉 解决了,开心(*^▽^*)以下是AC的Java代码 以下是C++代码 #include<cstdi ...

  7. argument

    js中arguments的用法   了解arguments这个对象之前先来认识一下javascript的一些功能: 其实Javascript并没有重载函数的功能,但是Arguments对象能够模拟重载 ...

  8. ALSA lib基本概念

    1.channel 通道,即我们熟知的声道数.左/右声道,5.1channel等等 2.sample A sample is a single value that describes the amp ...

  9. mybatis会自动把字段名中的下划线转为驼峰命名法？

    先看一下转化的调用堆栈: 代码如下: 上面代码只是去掉了下划线,并没有首字母小写变大写的代码.再跟进findProperty方法可以找到获取驼峰结果的代码如下: 可以看出通过reflector.fin ...

  10. pwnable.kr-flag-Writeup

    MarkdownPad Document *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...