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

随机推荐

51nod- 【1042 数字0-9的数量】
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1042 题目: 1042 数字0-9的数量基准时间限制:1 ...
软工实践——结对作业2【wordCount进阶需求】
附录: 队友的博客链接本次作业的博客链接同名仓库项目地址一.具体分工我负责撰写爬虫爬取信息以及代码整合测试,队友子恒负责写词组词频统计功能的代码. 二.PSP表格 PSP2.1 Persona ...
腾讯云JavaWeb环境配置
腾讯云服务器Centos7系统配置javaWeb运行环境 java1.8 运行命令列表 yum list java-* 安装相应版本的jdk,一般含有devel的就是真正的jdk,如:java-1.8 ...
ubuntu shell插件
1. NetSpeed 在状态栏显示当前网速 2. Screenshot Tool 同样在 Ubuntu 18.04 之前我们使用 Shutter,但在Ubuntu 18.04 Shutter的托盘图 ...
C++学习（十四）（C语言部分）之数组
上期回顾:三大循环 for while do while (循环体至少会执行一次)四大跳转 goto continue(提前跳出当前循环进入下一个循环) break(跳出本次循环) return(跳 ...
url中携带中文乱码问题
1.问题描述在项目中碰见url中经常传递中文参数时,容易出现乱码问题,现在就这个问题产生原因和解决的措施大概分析一下,希望过路人和我能引以为戒. 2.问题分析由于我们利用URL传递参数这种方式是依 ...
服务器cpu负载过高问题排查
https://blog.csdn.net/MrZhangXL/article/details/77711996 第一步 :执行top命令,查出当前机器线程情况 top - 09:14:36 up 1 ...
【BZOJ1082】【SCOI2005】栅栏
暴力出奇迹…… 原题: 农夫约翰打算建立一个栅栏将他的牧场给围起来,因此他需要一些特定规格的木材.于是农夫约翰到木材店购买木材.可是木材店老板说他这里只剩下少部分大规格的木板了.不过约翰可以购买这些木 ...
mongodb千万级写入怎么优化
从mysql数据库通过java程序导入单表1300w到mongodb,花了大概50分钟,前1000w条数据中每100w条大概要3分钟,之后的300多w条就差不多每100w条要5到6分钟,之后再从其他的 ...
（惊艳）对象序列化和反序列--Hibernate的查询和新增极其相似
Hibernate几个关键字持久化,ORM(关系对象映射)(数据库中关系称作是一张表) 应用在项目中,刘一从写的查询代码,每次都挂掉,想要弄出测试数据,自己想着把查询出来的复杂数据弄到文件里自己要是去 ...

JavaScript之图片操作7

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

随机推荐

热门专题