<!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. HDU 3530

    新手理解(可能有理解错误的地方,请指教,嘿嘿) #include<stdio.h> #include<string.h> #include<math.h> #inc ...

  2. SaltStack自动化软件简介及安装

    ==================================================================================================== ...

  3. Codeforces Round #567 (Div. 2) A.Chunga-Changa

    原文链接:传送 #include"algorithm" #include"iostream" #include"cmath" using n ...

  4. C语言数据结构——第三章 栈和队列

    三.栈和队列 栈和队列是两种重要的线性结构.从数据结构的角度来看,栈和队列也是线性表,它的特殊性在于栈和队列的基本操作是线性表操作的子集,它们的操作相对于线性表来说是受到限制的,因此,可以称其为限定性 ...

  5. Qt5 error LNK2019 无法解析的外部符号的解决办法

    今天在使用Qt Create 4.5.2时遇到一个莫名其妙的问题: 在原有工程里添加一个新类(有界面的),在调用的mainwindow.cpp中添加#include "a.h",然 ...

  6. 计算几何-LA2218-HPI-第一次卡精度-vijos1087-铁人三项

    This article is made by Jason-Cow.Welcome to reprint.But please post the writer's address. http://ww ...

  7. Boxes and Candies

    问题 G: Boxes and Candies 时间限制: 1 Sec  内存限制: 128 MB[提交] [状态] 题目描述 There are N boxes arranged in a row. ...

  8. Good Bye 2019E（点坐标缩小一半以区分奇偶性）

    设某个点的坐标为(x,y),根据坐标奇偶性公可分为四类,0表示偶数,1表示奇数,(0,0),(0,1),(1,0),(1,1). 如果所有点的坐标都属于一类,那么它们之间的距离都是4的倍数,无法分辨. ...

  9. pip install 安装指定版本的包

    pip install 安装指定版本的包   要用 pip 安装指定版本的 Python 包,只需通过 == 操作符 指定 pip install robotframework==2.8.7 将安装r ...

  10. java spring-boot 服务器启动参数设置

    java -jar -Xms5866m -Xmx5866m -Xss256k -Xloggc:/home/work/spring-boot/logs/gc-%t.log -XX:+UseGCLogFi ...