<!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. mysql基本约定与命名规范

    一.约定 1.如无特殊需求,所有表使用innodb引擎 2.如无特殊需求,所有主键均为自增类型 3.如无特殊需求,所有字段均为NOT NULL,并给定默认值 4.所有字段均设置备注,枚举字段需要说明每 ...

  2. 【vue】axios + cookie + 跳转登录方法

    axios 部分: import axios from 'axios' import cookie from './cookie.js' // import constVal from './cons ...

  3. active Directory域服务安装配置

    1.在Windows功能启用 2.安装一直下一步即可, 添加用户 添加域管理员 将普通用户添加到Domain Admins里

  4. promise学习，多看几次。含node，ES6知识

    一.引出promise解决回调地狱 需求:你要封装一个方法,我给你一个要读取文件的路径,你这个方法能帮我读取文件,并把内容返回给我 目录图片 三个txt里面的内容分别是111,222,333 1.模块 ...

  5. AS报错：Error:Execution failed for task ':app:preDebugAndroidTestBuild'. > Conflict with dependency 'com.and

    build->Rebuid-project 寻找错误根源: 报错里可以发现: Resolved versions for app (26.1.0) and test app (27.1.1) d ...

  6. java读/写文件

    读取文件参考:https://blog.csdn.net/weixin_42129373/article/details/82154471 写入文件参考:https://blog.csdn.net/B ...

  7. 502,csssprite是什么，有什么优缺点

    (百科:csssprite是一种网页图片应用处理方式,国内常叫css精灵.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢 ...

  8. 《爬虫学习》（一）（HTTP协议）

    Http请求: 1.在浏览器中发送一个http请求的过程: 2.url详解: URL是Uniform Resource Locator的简写,统一资源定位符. 一个URL由以下几部分组成 scheme ...

  9. php 基础 字符型转换整形

    示例: 可以得出规律:以有效数字开头的,取有效数字.以非有效数字开头的都转换为0:

  10. 8.5-Day1T2--Asm.Def 的基本算法

    题目大意 给一棵树,求∑∑w_i*w_j*w_LCA(i,j) w_i表示i点权值 题解 显然一点点求lca是肯定会tle的 那就想如何优化 i和j的lca和j和i的lca是一样的 DFS,在每个x处 ...