<!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. Oracle使用记录

    1.连接数据库的方式 sqlplus system/system@127.0.0.1:1521/orcl #远程用户名密码连接 sqlplus dbsnmp/oracle; #本地用户名密码连接 sq ...

  2. idea中使用Data Source and Drivers时，如果使用自己自定义的jar包

  3. swagger2 常用注解的使用

    一.@Api 效果: @Api注解放在类上面,这里的value是没用的,tags表示该controller的介绍. 二 .@ApiOperation 效果: @ApiOperation注解用于放在方法 ...

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

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

  5. 8.10-Day2T3 镇守府

    emm IOI原题(洛谷,bzoj都有) 其实并没有怎么搞懂dp方程转移那部分 就...粘个(抄来的)代码过来吧 #include<bits/stdc++.h> using namespa ...

  6. numpy (1.16.4) has the default value of allow_pickle as False.

    My version of numpy (1.16.4) has the default value of allow_pickle as False. numpy版本是1.16.4,allow_pi ...

  7. 概率DP lightoj 1265

    题意: 1.两只老虎相遇 就互相残杀 2.老虎与鹿相遇 鹿死 3.老虎与人相遇 人死 4.人与鹿相遇     鹿死 5.鹿与鹿相遇     无果 求人活的概率 解析:如果老虎为0  则人活得概率为1 ...

  8. vue项目怎么搭建到云服务器上

    链接1:https://blog.csdn.net/qq_37741554/article/details/87560823 linux下载安装node.js 链接2:https://blog.csd ...

  9. wampserver 配置的几个坑（雾

    1. 从安装版本说起 自从我进入大学之后,便继承了学长那里的wampserver2.5版本 直到有一天自己下载wamp的时候才注意到已经有 3.0.6版本了 (现在有更高的了 但是3.0.6够用了) ...

  10. [LEETCODE] 初级算法/数组 1.3旋转数组

    原题: 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5,6,7,1,2,3,4] 解释: 向右 ...