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 ...

随机推荐

django 一个关于分组查询的问题分析
ret=Emp.objects.values('dep').annotate(avg_salary=Avg('salary')) print(ret) # ---*******单表分组查询ORM总结: ...
Version Control 版本控制
一.version control是什么: version control版本控制,是指对软件开发过程中各种程序代码.配置文件及说明文档等文件变更的管理,是软件配置管理的核心思想之一. 二.versi ...
《DSP using MATLAB》Problem 6.3
天不亮又醒了,拍了张景象,这就是黎明前的黑暗吗
golang fatal error: concurrent map read and map write
调试程序的时候,为了打印map中的内容 ,直接使用seelog 的方法打印 map中的内容到日志,结果出现 “concurrent map read and map write”的错误,导致程序异常 ...
idea快捷键的修改
快捷键Ctrl+Alt+s,快速进入intellij idea设置项,点击Keymap,如图: 点击Main menu,再点开Code,如图: 点击Completion,再点击Basic,右键,如图 ...
RESTful Web API 理解
REST 是一种应用架构风格,不是一种标准,是面向资源架构(ROA)风格,与具体技术平台无关,REST架构的应用未必建立在Web之上,与之对应的是传统的Web Service 采用的面向操作的RPC架 ...
Sublime Text怎么快速建立一个html5页面模板
在编辑器中输入一个半角英文的感叹号(!),然后按下TAB键
Array.asList()
package study.stage2;import java.util.*; /** * Created by Sandy.Liu on 2017/7/19. */public class Asl ...
pyhanlp 停用词与用户自定义词典功能详解
hanlp的词典模式之前我们看了hanlp的词性标注,现在我们就要使用自定义词典与停用词功能了,首先关于HanLP的词性标注方式具体请看HanLP词性标注集. 其核心词典形式如下: 自定义词典自定 ...
用PHP发送POST请求
/** * 发送post请求 * @param string $url 请求地址 * @param array $post_data post键值对数据 * @return string */ fun ...

JavaScript之图片操作7

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

随机推荐

热门专题