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="images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="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

posted on 2018-09-01 11:07 紅葉阅读(689) 评论(0) 编辑收藏举报