Javascript实现简单焦点图

最新推荐文章于 2024-06-27 20:30:00 发布

C_Jing_

最新推荐文章于 2024-06-27 20:30:00 发布

阅读量4.5k

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/Capricorn_Jing/article/details/67640137

版权

分析：

总体思路：

所有图片其实都是经过定位、浮动等显示在同一行内的，通过改变图片容器的left值来实现一张一张移动的，再给最外层的总容器加一个overflow：hidden，每次就只能显示一张图片了，其他都被隐藏了，如下图

这里写图片描述

具体实现：

（一）html部分

包含内容：轮播图片、切换箭头(左右)、圆点切换按钮(底部)
注意问题：
-1. 轮播图片（假设有5张）排列顺序 → 5、1、2、3、4、5、1，头尾各有一张重复是为了实现循环滚动效果
-2. 在实现过程中，<img>虽然本身就能同行显示，而且已用 * 选择器去掉了所有元素的padding和margin，但由于书写代码时有回车和空字符的原因，图片之间还是有间隙，给<img>都加上左浮动可以消除间隙，这是当时遇到的一个小问题
-3. 为了方便与图片一一对应，给每个圆点按钮自定义了index属性

（二）js部分

包含内容：箭头点击切换效果、圆点按钮鼠标滑过切换效果、切换过程中的位移动画效果、页面加载后自动循环播放效果、鼠标移动到图片上停止自动播放移开后继续自动播放
注意问题：
-1. 箭头切换和圆点切换要互相配合好
-2. 自定义属性使用getAttribute( )获取
-3. 切换过程中的位移动画效果:总位移/移动次数最好整除，注意是整除而不是取整，否则会造成切换过程的最后一瞬间图片出现晃动，道理类似于”惯性”，切换过头了又倒回来的感觉
-4. 切换的优化问题：为了避免鼠标点击太快造成的切换效果错乱，每次切换前需要判断当前动画是否正在进行中，如果正在进行就暂不切换，如果没有动画正在进行就开始切换

代码展示：

(1)html代码

<body>
    <div id="banner">
        <div id="imglist" style="left:-790px">
            <img src="images/banner5.jpg">
            <img src="images/banner1.jpg">
            <img src="images/banner2.jpg">
            <img src="images/banner3.jpg">
            <img src="images/banner4.jpg">
            <img src="images/banner5.jpg">
            <img src="images/banner1.jpg">
        </div>
        <div id="cuts">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <i id="prev" class="arrow">&lt;</i>
        <i id="next" class="arrow">&gt;</i>
    </div>
</body>

(2)css样式

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #banner {
            width: 790px;
            height: 340px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            top: 50px;
        }
        #imglist {
            width: 5530px;
            height: 340px;
            position: absolute;
            z-index: 90;
        }
        #imglist img {
            float: left;
        }
        #cuts {
            width: 108px;
            height: 12px;
            padding: 4px 0;
            line-height: 20px;
            position: absolute;
            bottom: 20px;
            left: 341px;
            z-index: 100;
            background: rgba(255,255,255,.3);
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
        }
        #cuts span {
            float: left;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            margin-left: 8px;
        }
        #cuts .on {
            background: #DB192A;
        }
        .arrow{
            width: 30px;
            height: 60px;
            line-height: 60px;
            position: absolute;
            top: 140px;
            z-index: 100;
            background: rgba(0,0,0,.2);
            color: #fff;
            text-align: center;
            cursor: pointer;
            display: none;
        }
        .arrow:hover{
            background: rgba(0,0,0,.5);
        }
        #banner:hover .arrow {
            display: block;
        }
        #prev {
            left: 0;
        }
        #next {
            right:0;
        }
    </style>

(3)js代码

<script>
    window.onload = function (){
        var prev = document.querySelector("#prev");
        var next = document.querySelector("#next");
        var imglist = document.querySelector("#imglist");
        var cuts = document.querySelectorAll("#cuts span");
        var index = 1;
        var len = 5;
        var animated = false;
        var timer;      

        function animate(offset){
            var left = parseInt(imglist.style.left)+offset;
            var time = 100;
            var interval = 10;
            var speed = offset/(time/interval);
            function go(){ //位移动画效果
                animated = true;
                if((speed>0 && parseInt(imglist.style.left)<left) || (speed<0 && parseInt(imglist.style.left)>left)){
                    imglist.style.left = parseInt(imglist.style.left) + speed + "px";
                    setTimeout(go,interval);
                }else {
                    imglist.style.left = left + "px";
                    if(left>-790){
                        imglist.style.left = -790*len + "px";
                    }else if(left<(-790*len)){
                        imglist.style.left ="-790px";
                    }
                    animated = false;
                }
            }
            go();
        }

        function showBtn(){ //圆点按钮切换效果
            for (var i = 0; i < cuts.length; i++) {
                if(cuts[i].className == "on"){
                    cuts[i].className = "";
                    break;
                }
            }
            cuts[index-1].className = "on";
        }
        for (var i = 0; i < cuts.length; i++) {     
            cuts[i].onmouseover = function(){   
                if(animated){
                        return;
                }else if (this.className == "on"){
                        return;
                }       
                var myIndex = parseInt(this.getAttribute("index"));//取到的index属性是字符串，所以转number;
                var offset = -790*(myIndex - index);
                animate(offset);
                index = myIndex;
                showBtn();
            }

        prev.onclick = function(){ //左箭头切换
            if(animated){
                return;
            }
            if(index == 1){
                index = 5;
            }else{
                index -= 1;
            }           
            animate(790);       
            showBtn();
        }
        next.onclick = function(){ //右箭头切换
            if(animated){
                return;
            }
            if(index == 5){
                index = 1;
            }else{
                index += 1;
            }
            animate(-790);
            showBtn();
        }

        function play(){ //自动播放
            timer = setInterval(function(){
                next.onclick();
            },2000);
        }
        function stop(){
            clearTimeout(timer);
        }
        banner.onmouseover = stop;
        banner.onmouseout = play;
        play();
    }
</script>

难点：
-1.箭头切换和圆点切换的相互配合
-2.位移动画效果的逻辑分析和实现过程
-3.判断动画是否正在进行的逻辑分析

C_Jing_

关注

3
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
Javascript实现简单焦点图

总体思路：所有图片其实都是经过定位、浮动等显示在同一行内的，通过改变图片容器的left值来实现一张一张移动的，再给最外层的总容器加一个overflow：hidden，每次就只能显示一张图片了，其他都被隐藏了
复制链接

扫一扫