JavaScript之图片操作7

前面总结了很多了有关于图片操作的案例，本次是基于前面的基础，做一个综合的图片轮播效果，需要实现以下功能：

没有任何操作时，图片自动轮播
鼠标悬浮时，图片停止轮播；当鼠标移开，轮播继续
鼠标悬浮时，出现左右切换按钮，可点击按钮进行左右切换
点击地下的小按钮进行切换

为了实现上面的效果，我们需要有个大盒子来固定位置和大小，然后就需要一个放置图片的div，里面放图片列表，焦点列表，左右按钮：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

    <style>

        * {

            margin: 0;

            padding: 0

        }

        .box {

            width: 500px;

            height: 300px;

            border: 1px solid #ccc;

            margin: 100px auto;

            padding: 5px;

        }

        .inner{

            width: 500px;

            height: 300px;

            position: relative;

            overflow: hidden;

        }

        .inner img{

            width: 500px;

            height: 300px;

            vertical-align: top

        }

        ul {

            width: 1000%;

            position: absolute;

            list-style: none;

            left:0;

            top: 0;

        }

        .inner li{

            float: left;

        }

        ol {

            position: absolute;

            height: 20px;

            right: 20px;

            bottom: 20px;

            text-align: center;

            padding: 5px;

        }

        ol li{

            display: inline-block;

            width: 20px;

            height: 20px;

            line-height: 20px;

            background-color: #fff;

            margin: 5px;

            cursor: pointer;

        }

        ol .current{

            background-color: red;

        }

        #arr{

            display: none;

        }

        #arr span{

            width: 40px;

            height: 40px;

            position: absolute;

            left: 5px;

            top: 50%;

            margin-top: -20px;

            background: #fff;

            cursor: pointer;

            line-height: 40px;

            text-align: center;

            font-weight: bold;

            font-family: '黑体';

            font-size: 30px;

            color: #000;

            opacity: 0.5;

            border: 1px solid #fff;

        }

        #arr #right {

            right: 5px;

            left: auto;

        }

    </style>

</head>

<body>

<div class="box" id="box">

    <div class="inner">

        <!--轮播图-->

        <ul>

            <li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>

        </ul>

        <ol class="bar">

        </ol>

        <!--左右焦点-->

        <div id="arr">

                    <span id="left">

                        <

                    </span>

            <span id="right">

                        >

                    </span>

        </div>

    </div>

</div>

</body>

</html>

此时，基本结构完成，因为超出隐藏，所以只显示了第一张图片

接下来就是写相关的事件方法了。

首先，我们需要获取会用到相关元素

var box=document.getElementById("box");

    var inner=box.children[0];

    var ulObj=inner.children[0];

    var list=ulObj.children;

    var olObj=inner.children[1];

    var arr=document.getElementById("arr");

    var imgWidth=inner.offsetWidth;

    var right=document.getElementById("right");

    var pic=0;

其次，在上面我们可以看到，操作需要用到的小按钮并没有，这时因为在实际运用中，图片的数量是不可控的，所以小按钮的数量也是不可控的，我们可以采用js根据图片的数量来动态生成。当鼠标移入某个按钮时，该按钮高亮，并且轮播图切换到与该按钮索引相同的图片，所以我们需要为按钮添加鼠标事件。

然后就是外层盒子的鼠标事件，没有任何操作时，图片自动轮播；鼠标移入，左右切换按钮出现，图片轮播停止；鼠标移除，左右切换按钮隐藏，图片继续轮播。

最后就是个左右按钮添加点击切换事件，具体代码如下：

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

        var liObj=document.createElement("li");

        olObj.appendChild(liObj);

        liObj.innerText=(i+1);

        liObj.setAttribute("index",i);

        liObj.onmouseover=function () {

            for (var j=0;j<olObj.children.length;j++){

                olObj.children[j].removeAttribute("class");

            }

            this.className="current";

            pic=this.getAttribute("index");

            animate(ulObj,-pic*imgWidth);

        }

    }

    olObj.children[0].className = "current";ulObj.appendChild(ulObj.children[0].cloneNode(true));

    var timeId=setInterval(onmouseclickHandle,3000);

    box.onmouseover=function () {

        arr.style.display="block";

        clearInterval(timeId);

    };

    box.onmouseout=function () {

        arr.style.display="none";

        timeId=setInterval(onmouseclickHandle,3000);

    };

    right.onclick=onmouseclickHandle;

    function onmouseclickHandle() {

        if (pic == list.length - 1) {

            pic = 0;//先设置pic=0

            ulObj.style.left = 0 + "px";

        }

        pic++;

        animate(ulObj, -pic * imgWidth);if (pic == list.length - 1) {

            olObj.children[olObj.children.length - 1].className = "";

            olObj.children[0].className = "current";

        } else {

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

                olObj.children[i].removeAttribute("class");

            }

            olObj.children[pic].className = "current";

        }

    }

    left.onclick=function () {

        if (pic==0){

            pic=list.length-1;

            ulObj.style.left=-pic*imgWidth+"px";

        }

        pic--;

        animate(ulObj,-pic*imgWidth);

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

            olObj.children[i].removeAttribute("class");

        }

        olObj.children[pic].className = "current";

    };

    function animate(element, target) {

        clearInterval(element.timeId);

        element.timeId = setInterval(function () {

            var current = element.offsetLeft;

            var step = 10;

            step = current < target ? step : -step;

            current += step;

            if (Math.abs(current - target) > Math.abs(step)) {

                element.style.left = current + "px";

            } else {

                clearInterval(element.timeId);

                element.style.left = target + "px";

            }

        }, 10);

    }

完整详细代码下载：点这里

最后分享一个图片轮播插件的链接：https://www.html5tricks.com/15-jquery-html5-image-player.html

JavaScript之图片操作7的更多相关文章

JavaScript之图片操作5
本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们 ...
JavaScript之图片操作1
在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换. 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在ht ...
JavaScript之图片操作6
上一篇写的关于放大镜的,可能在实际开发中用的不是很多,接下来将的图片无缝滚动在实际工作中就是用的比较多的了. 如上图,通过定时器控制图片无缝滚动,当鼠标悬浮时停止滚动,鼠标离开,滚动继续. 主要原理是 ...
JavaScript之图片操作3
在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控 ...
JavaScript之图片操作4
本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动. 为 ...
JavaScript之图片操作2
在前一次,我们实现最简单的图片切换效果,这一次,依旧还是图片切换,具体效果如下: 通过点击下面的小图,上面的大图和标题随之切换.因此,我们需要三个容器分别放标题,大图和小图. <!--大图描述- ...
JavaScript校验图片格式及大小
<!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...
网站开发综合技术三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
JavaScript DOM 基础操作
JavaScript DOM 基础操作一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

随机推荐

1.Tensorflow的基本概念：
1.Tensorflow的基本概念: 1.使用图(graphs)来表示计算任务 2.在被称之为会话(Session)的上下文(context)中执行图 3.使用tensor表示数据 4.通过变量(Va ...
下载B站、秒拍等视频网站视频
需要一个FVD Downloader(插件) 安装过程很简单,会浏览器安装插件的就不多说了!
POJ3904 Sky Code
题意 Language:Default Sky Code Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3980 Accepte ...
golang pprof 内存分析
use pprof to get application memory useage add code in your main funciton import ( "log" ...
Centos7安装32位库用来安装32位软件程序
打算在centos7上安装一个远程控制软件,发现teamviewer只有centos的32位版本,试着安装了一下,各种报错,尝试多次无果.于是试着用向日葵远程控制软件,也报错,貌似也是只支持32位. ...
C# to IL 10 Exception Handling(异常处理)
Exception handling in IL is a big let down. We expected a significant amount of complexity,but were ...
ArrayList集合方法
Windows git 初始设置
主要布署在 Linux 服务器上时,将全局设置为提交自动转为 LF,签出不转换.git config --global core.autocrlf input(无效了,按默认即可) 设置全局用户名.
day 30 1.操作系统原理 2. Process 模块学习
进程: 起源:进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其他所有内容都是围绕进程的概念展开的.所以想要真正了解进程,必须事先了解操作 ...
外观模式face
5.1 模式优点外观模式的主要优点如下: (1) 它对客户端屏蔽了子系统组件,减少了客户端所需处理的对象数目,并使得子系统使用起来更加容易.通过引入外观模式,客户端代码将变得很简单,与之 ...

JavaScript之图片操作7

JavaScript之图片操作7的更多相关文章

随机推荐

热门专题