JavaScript各类轮播图（二）

最新推荐文章于 2024-09-20 11:38:47 发布
最新推荐文章于 2024-09-20 11:38:47 发布
阅读量336 收藏 2
点赞数 1
文章标签： javascript 轮播图 web 缓动动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33599109/article/details/77250870
版权

第二种

原理：把所有图片放在一侧，如：全部放在右侧，缓动到盒子中，在从盒子中缓动到左侧，在把左侧的图片放回右侧
//body部分

//具体细节请参照第一种，链接在文章尾部
    <div class="box">
        <div class="slider-content">
            <div><img src="images/1.jpg" alt="" /></div>
            <div><img src="images/2.jpg" alt="" /></div>
            <div><img src="images/3.jpg" alt="" /></div>
            <div><img src="images/4.jpg" alt="" /></div>
            <div><img src="images/5.jpg" alt="" /></div>
        </div>
        <div class="slider-control">
            <!-- <span class="slider-control-bar current"></span>
            <span class="slider-control-bar "></span>
            <span class="slider-control-bar "></span>
            <span class="slider-control-bar "></span>
            <span class="slider-control-bar "></span> -->
        </div>
        <span id="pre"></span>
        <span id="next"></span>
    </div>

//CSS样式

        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 800px;
            height: 450px;
            position: relative;
            margin: 50px auto;
            overflow: hidden;
        }
        .box .slider-content{
            width: 800px;
            height: 400px;
        }
        .box .slider-content div{    //让图片全部脱标，便于处理
            position: absolute;
            top: 0;
            left: 0;
        }
        .box .slider-content img{
            width: 800px;
            height: 400px;
        }

        .box .slider-control{       //下标样式
            width: 800px;
            height: 50px;
            /*background-color: pink;*/
            text-align: center;
        }   
        .box .slider-control .slider-control-bar{      //此处的序列加背景图片
            display: inline-block;
            width: 32px;
            height: 5px;
            background: url(images/icon.png) no-repeat -32px -850px;
            /*background-size: 64px 5px;*/
            cursor: pointer;
            margin: 15px 20px 0 15px;
        }
        .box .slider-control .slider-control-bar:hover{
            background: url(images/icon.png) no-repeat -32px -830px;
        }
        .box .slider-control .slider-control-bar.current{
            background: url(images/icon.png) no-repeat 0px -830px;
        }

        #pre,#next{
            width: 20px;
            height: 35px;
            position: absolute;
            top: 40%;
            /*left: 0;*/
            background-color: red;
            cursor: pointer;
        }
        #pre{          //左右切换加背景图片和背景颜色，注意写法。
            left: 5px;
            padding: 5px;
            background: rgba(0,0,0,0.6) url(images/icon.png) no-repeat 5px 5px;
        }
        #next{
            right: 5px;
            padding: 5px;
            background: rgba(0,0,0,0.6) url(images/icon.png) no-repeat -5px -40px;
        }

重点：JS部分

window.onload = function(){
    var box = document.getElementsByClassName('box')[0];
    var content = document.getElementsByClassName('slider-content')[0];
    var imgArr = content.getElementsByTagName('div');
    var control = box.getElementsByClassName('slider-control')[0];
    var listArr = control.getElementsByTagName('span');
    var pre = document.getElementById('pre');
    var next = document.getElementById('next');
    var imgWidth = imgArr[0].offsetWidth;

    for(var i = 0; i < imgArr.length; i++){    //在控制栏中创建序列
        var bar = document.createElement('span');
        if(i == 0){       //创建的第一序列给添加背景颜色
            bar.className = 'slider-control-bar current';
        }else{
            bar.className = 'slider-control-bar';
        }               
        control.appendChild(bar);

        bar.index = i;
        bar.onclick = function(){         //序列的点击事件
            if(currentIndex > this.index){         //如果当前的索引比点击的序列大时，把点击的序列对应的图片放在盒子左侧，当前的图片右移，然后点击序列对应的图片右移 left:0
                imgArr[this.index].style.left = -imgWidth + 'px';
                animate(imgArr[currentIndex],{left:imgWidth});
            }else if(currentIndex < this.index){          //如果点击的序列比当前图片的索引大时，点击序列对应的图片放在右边，当前图片左移，点击序列的图片左移
                imgArr[this.index].style.left = imgWidth + 'px';
                animate(imgArr[currentIndex],{left:-imgWidth}); 
            }
            currentIndex = this.index;        //移动时要更改整体的索引值
            animate(imgArr[this.index],{left:0});
            for(var i = 0; i < imgArr.length; i++){       //用排他思想，为点击的序列添加背景（即切换背景图片，即增加类名）
                listArr[i].className = "slider-control-bar";
            }
            this.className = "slider-control-bar current";
        }
    }

            //设置最初样式，所有图片放在盒子右边，然后第一张图片放在盒子中        
            for(var i = 0; i < imgArr.length; i++){
                imgArr[i].style.left = imgWidth + 'px';
            }
            imgArr[0].style.left = 0 + 'px';
            var currentIndex = 0;      //定义索引值，初始为0
            function nextImg(){         //下一张图片 
                animate(imgArr[currentIndex],{left:-imgWidth});   //当前索引的图片向左移
                currentIndex++;         //索引加1
                if(currentIndex >= imgArr.length){      //如果索引等于图片的数量，索引归0
                    currentIndex = 0;
                }
                imgArr[currentIndex].style.left = imgWidth + "px";    //因为索引加1后，当前索引对应的图片放在盒子右边，并开始移动
                animate(imgArr[currentIndex],{left:0});
                for(var i = 0; i < imgArr.length; i++){     //排他思想设置序列的背景
                    listArr[i].className = "slider-control-bar";
                }
                listArr[currentIndex].className = "slider-control-bar current";
            }

            function preImg(){              //向前移
                animate(imgArr[currentIndex],{left:imgWidth});       //当前索引的图片移到右边
                currentIndex--;         //索引减1
                if(currentIndex < 0){     //如果索引减小于0，则切换到最后一张图片的索引
                    currentIndex = imgArr.length-1;
                }
                imgArr[currentIndex].style.left = -imgWidth + 'px';       //因为索引改变，所以当前索引的图片放在盒子左边，然后右移
                animate(imgArr[currentIndex],{left:0});
                for(var i = 0; i < imgArr.length; i++){      //排他思想设置序列的背景
                    listArr[i].className = "slider-control-bar";
                }
                listArr[currentIndex].className = "slider-control-bar current";
            }
            var timer = setInterval(nextImg,4000);   //开启定时器，自动播放
            pre.onclick = preImg;       //当点击左侧方块的时候，开启左移
            next.onclick = nextImg;      //当点击右侧方块的时候，开启右移
            box.onmouseover = function(){    //鼠标放在盒子上，清除定时器
                clearInterval(timer);
            }
            box.onmouseout = function(){    //鼠标移开，继续
                timer = setInterval(nextImg,4000);
            }
        }

    **//下面是封装的缓动动画函数，详细请点击下文链接**        
    function animate(ele,json,fn){
        clearInterval(ele.timer);
        ele.timer = setInterval(function(){
            var bool = true;
            for(k in json){
                if(k == "opacity"){
                    var leader = parseInt(getStyle(ele,k)*100) || 1;
                }else{
                    var leader = parseInt(getStyle(ele,k)) || 0;
                }                               
                var step = (json[k] - leader) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);   
                leader = leader + step;             
                if(k == "opacity"){             
                    // console.log(leader);     
                    ele.style[k] = leader / 100;
                    ele.style.filter = "alpha(opacity=" + leader + ")";
                }else if(k == "zIndex"){
                    ele.style[k] = leader;
                }else{
                    ele.style[k] = leader + "px";
                }

                if(leader !== json[k]){
                    bool = false;
                }                                                           
            }
            if(bool){
                clearInterval(ele.timer);
                if(typeof fn == 'function'){
                    fn();
                }
            }
        },25);

    }

    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    }

第一种轮播图链接：http://blog.csdn.net/qq_33599109/article/details/77249062
缓动动画函数封装：http://blog.csdn.net/qq_33599109/article/details/77257182

作者：kuke_kuke
博客链接：http://blog.csdn.net/qq_33599109
欢迎关注支持，谢谢！

kuke_kuke
关注
【HTML | 模板】图片 轮播 (轮播图)
诗小呐的博客
11-18 1748
============================================ html <!-- 放置在 head 中 --> <link rel="stylesheet" href="图片轮播/lb.css"> <script src="图片轮播/lb.js"></script> <script> window.onload = function () { // 轮播选项 const optio
图片轮播(首尾无缝+JS节流的应用)
qq_33869705的博客
10-16 1000
往往我们会在各大购物网站看到关于各类商品的横向轮播图，如淘宝网、京东网首页的品牌轮播图以及浏览器弹出的轮播广告栏，我们自己实现的时候可能达不到一摸一样的效果，如轮播抖动，首尾切换不平滑等等。利用节流的方法结合传统的轮播原理，就可以基本实现上述网站的轮播功能，主要利用的setTimeout函数的功能。
JavaScript各类轮播图（一）
kuke_kuke的博客
08-16 1083
第一种常规轮播图（如淘宝、京东广告等） ul>li>img样式
网页轮播图 JavaScript
DOT_liu的博客
05-05 415
目录结构： 图片说明： banner1.jpg、banner2.jpg、banner3.jpg宽度：width：2000px,高度：height:470px，banner_left.png、banner_right.png宽度：width：80px,高度：height:84px 代码部分： 1、index.html: <!DOCTYPE html> <html lang="en...
【转】四种方式实现轮播图
liangtaox8的博客
07-03 1311
转载自：http://www.jianshu.com/p/bd1f34e7e953 不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。 轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~ 为了方便大家观看，我把css，html，js都写在一...
【原生js】详解轮播图之无缝滚动
热门推荐
zoro的博客
12-18 1万+
前言：轮播图，是网站首页中最常见的一种图片切换特效，作为前端开发者，我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播，省事简单。所以我今天想介绍一下原生js代码实现的图片轮播。结构部分html部分<body> <!--展示窗口--> <div class="show_box"> <!--轮播图图片--> <div class="pic_box">
pc端网页轮播图+动画函数
weixin_43288180的博客
12-19 364
本来想上gif图片，奈何图片太大上传不了，功能方面就和其他各类大型网站的一模一样。js里面执行的animate（）函数是动画，也一并放在最下面
前端效果积累 ｜别具一格的3D酷炫轮播图效果收集
陶人超有料的博客
02-05 2240
整理了一些常用的酷炫3D轮播图效果，pc和移动端均适配！
（入门篇）JavaScript 网页设计案例浅析-简单的交互式图片轮播
做一个道者
09-08 1092
通过这个简单的 JavaScript 案例，你可以看到网页设计中如何结合 HTML、CSS 和 JavaScript 来实现互动效果。JavaScript 的事件处理和 DOM 操作是前端开发的基础技能，而通过不断练习和扩展这些基础案例，你会逐渐掌握更多复杂的功能和技巧。如果你是前端开发的新手，建议从这种小案例开始，通过一步步的实践，逐渐加深对 JavaScript 的理解。希望今天的分享对你有所帮助，下一次我们可以一起探索更有趣的网页设计功能！
jquery轮播图画廊轮播图幻灯片
12-07
jQuery轮播图的核心是通过JavaScript操作DOM（文档对象模型）来改变图片或内容的显示状态。通常包括以下功能： 1. **自动切换**：设置定时器，每隔一定时间自动切换到下一张图片。 2. **手动切换**：用户可以通过...
jquery轮播图，jquery响应式自适应屏幕尺寸轮播图插件
12-07
**jQuery轮播图插件详解** 在Web开发中，轮播图是一种常见且重要的元素，用于展示多张图片或内容，通常用在首页焦点图、产品展示等场景。jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能来实现动态、交互...
JS网页特效京东首页轮播图
11-16
在京东首页，这种轮播图被广泛运用，以吸引用户关注各类商品促销信息。实现这样的轮播图效果，主要涉及JavaScript、CSS以及HTML等前端技术。 首先，我们需要理解轮播图的基本结构。它通常包含一个容器（container）...
轮播图资源包随意领取
07-06
在这个“轮播图资源包”中，可能包含了用于创建动态轮播图所需的各类素材，例如图片、CSS样式文件、JavaScript脚本等。 1. **HTML 结构**：轮播图的基础是HTML结构，一般包括一个容器元素以及多个轮播项（幻灯片）...
网页设计 - 随机轮播图测试用图
04-26
轮播图的自动播放、手动切换、动画效果等功能都需要通过JavaScript来实现。例如，可以编写函数来改变图片的显示顺序，同时添加事件监听器来响应用户点击控制按钮或触发动画。 此外，**动画库和框架**如Bootstrap的...
Babel
最新发布
小秀的博客
09-20 435
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 749
【代码】【JavaScript】LeetCode：707设计链表。
记录一个英语听力网站的开发
程序员Blue的博客
09-14 754
网站目前导入了雅思历年真题的听力音频，作为日常英语听力练习的素材已足够。网站的核心功能是英语句子的精听训练，用户可以反复播放每一句话，直到完全听懂为止。播放/暂停上一句/下一句播放次数选择播放速度调整字体大小调整是否显示原文与译文是否自动播放下一句标记文章已完成上图中的绿色进度条，展示了当前卡片完成的百分比，一个卡片对应一年的剑雅真题，一共16篇听力练习，在每一篇文章练习完成后，可以点击”标记已完成“，然后在下一次进入列表页时，就可以比较直观的看到学习进度。
vue 案例使用
buhuidage的博客
09-17 326
加上show-password就行。el-switch 按键的使用。
CSS+JS实现轮播图动态切换与自动播放
首先，通过JavaScript和CSS，开发者需要为底部的小圆点添加鼠标进入事件，改变它们的背景颜色，并跟踪轮播图容器的宽度。通过设置`overflow`属性，确保小圆点与显示的图片保持同步。当鼠标移到不同的小圆点上，轮播...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值