js轮播图

最新推荐文章于 2024-04-05 18:17:54 发布
最新推荐文章于 2024-04-05 18:17:54 发布
阅读量128 收藏
点赞数
分类专栏： JS 文章标签： 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hemeng0115/article/details/83903440
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    //封装的图片预加载

    var loadImg=(function () {

        return{

            //图片的预加载,输入要加载图片的数组，加载完成后抛出去(抛发形式)

            loadImage:function (arr,callback) {

                var img=new Image();

                img.arr=arr;//以便在侦听函数中调用数组

                img.list=[];//图片加载完成要存放的数组

                img.num=0;

                img.callback=callback;

                img.addEventListener("load",loadImg.loadHandler);

                img.src=arr[img.num];//从数组的第一项开始加载图片

            },

            //侦听事件函数

            LOAD_IMAGE_FINISH:"load_image_finish",//如果没有回调函数，就用静态方法(常量)

            loadHandler:function () {

                this.list.push(this.cloneNode(false));//this是被侦听的对象img,将图片放到list数组中

                this.num++;//图片加载完一张加载下一张

                if(this.num===this.arr.length){

                    if(this.callback){//如果存在回调函数，同过回调函数返回出去加载完成的图片数组list

                        this.callback(this.list);

                        return;//图片加载完成返回出去

                    }

                    var evt=new Event(loadImg.LOAD_IMAGE_FINISH);

                    evt.list=this.list;

                    document.dispatchEvent(evt);//事件抛发的形式将图片加载完成抛发出去

                    return;//图片加载完成返回出去

                }

                this.src=this.arr[this.num];

            }

        }

    })();

 

    //写一个创建元素的函数：创建什么元素，放在哪里，内容是什么，样式是什么

    function createElem(elem,parent,content,style) {

        var ele=document.createElement(elem);

        if(parent){

            parent.appendChild(ele);

        }

        if(ele==="input"){

            ele.value=content;

        }else if(elem==="img"){

            ele.src=content;

        }else{

            if(content){

                var text=document.createTextNode(content);

                ele.appendChild(text);

            }

        }

        if(style){

            setStyle(ele,style);

        }

        return ele;

    }

    //设置元素的样式

    function setStyle(elem,css) {

        //样式是一个对象：类似下面这种，可以遍历

        /*var divStyle={

           width:"100px",

           height:"120x",

           border:"1px solid #000000"

            };*/

        for(var str in css){

            elem.style[str]=css[str];

        }

    }

 

    var rollImage,imgCon,ul,preLi;

    //rollImage最外面的大容器

    //imgCon放图片的小容器

    //轮播的大图

    var arr = ["image/a.jpeg", "image/b.jpeg", "image/c.jpeg", "image/d.jpeg", "image/e.jpeg"];

    //左右按钮

    var bnArr = ["image/left.png", "image/right.png"];

    //小图

    var icon = ["image/icon_a.jpeg", "image/icon_b.jpeg", "image/icon_c.jpeg", "image/icon_d.jpeg", "image/icon_e.jpeg"];

    var imgList;//加载出来的轮播图片放在里面

    var bnList;//加载的左右按钮图片放在里面

    var iconList;//加载的小图片放在里面

    var position=0;//轮播的位置，就是轮播到第几张图

    var direction;//图片轮播的方向

    var bool=false;

    var autoBool=false;

    var time=120;

    //    loadImage(arr);//加载图片

    loadImg.loadImage(arr,loadImageFinish);//加载图片

    function loadImageFinish(list) {

        imgList=list;

        loadImg.loadImage(bnArr,loadBnFinish);

    }

    function loadBnFinish(list) {

        bnList=list;

        loadImg.loadImage(icon,loadIconFinish);

    }

    function loadIconFinish(list) {

        iconList=list;

        init();//初始化函数

    }

    function init() {

        animation();

        createRollImage();//再初始函数中创建

        creatLi();

        changeLi();

        imgCon.appendChild(imgList[0]);

        imgList[0].style.width=rollImage.offsetWidth+"px";

        imgList[0].style.height=rollImage.offsetHeight+"px";

        rollImage.addEventListener("mouseleave",mouseHandler);

        rollImage.addEventListener("mouseenter",mouseHandler);

    }

    //创建框架

    function createRollImage() {

        var divStyle={

            width:"960px",

            height:"320px",

            margin:"auto",

            position:"relative",

            overflow:"hidden"

        };

        var imgConStyle={

            position:"absolute",

            height:"320x"

        };

        var ulStyle={

            position:"absolute",

            listStyle:"none",

            bottom:"30px",

            dispaly:"none"

        };

        var leftStyle={

            position:"absolute",

            left:"5px"

        };

        var rightStyle={

            position:"absolute",

            right:"5px"

        }

        leftStyle.top=rightStyle.top=(parseInt(divStyle.height)-bnList[0].height)/2+"px";

        rollImage=createElem("div",document.body,"",divStyle);//创建最外面的大容器

        imgCon=createElem("div",rollImage,"",imgConStyle);//放图片的小容器

        ul=createElem("ul",rollImage,"",ulStyle);

        for(var i=0;i<bnList.length;i++){

            rollImage.appendChild(bnList[i]);

            setStyle(bnList[i],i===0 ? leftStyle : rightStyle);

            bnList[i].addEventListener("click",bnClickHandler);

        }

    }

    //创建小图

    function creatLi() {

        var liStyle={

          width:"108px",

          height:"67px",

          marginLeft:"1px",

          float:"left"

        };

        for(var i=0;i<imgList.length;i++){

            var li=createElem("li",ul,"",liStyle);

            li.num=i;

            li.appendChild(iconList[i]);

            li.addEventListener("click",liClickHandler);

        }

        ul.style.left=(rollImage.offsetWidth-ul.offsetWidth)/2+"px";

    }

    //左右按钮点击事件

    function bnClickHandler(e) {

        if(bool) return;

        if(this===bnList[0]){

            direction="right";

            position--;

            if(position<0) position=imgList.length;

        }else if(this===bnList[1]){

            direction="left";

            position++;

            if(position===imgList.length) position=0;

        }

        creatNext();

    }

    //小图点击事件

    function liClickHandler(e) {

        if(bool) return;

        if(this.num===position) return;

        direction=this.num>position ? "left" : "right";

        position=this.num;

        creatNext();

    }

    function mouseHandler(e) {

        if(e.type==="mouseleave"){

            autoBool=true;

        }else if(e.type==="mouseenter"){

            autoBool=false;

            time=120;

        }

    }

    function creatNext() {

        imgList[position].style.width=rollImage.offsetWidth+"px";

        imgList[position].style.height=rollImage.offsetHeight+"px";

        imgCon.style.width=rollImage.offsetWidth*2+"px";

        if(direction==="left"){

            imgCon.appendChild(imgList[position]);

            imgCon.style.left="0px";

        }else if(direction==="right"){

            imgCon.insertBefore(imgList[position],imgCon.firstElementChild);

            imgCon.style.left=-rollImage.offsetWidth+"px";

        }

        bool=true;

    }

    function changeLi() {

        if(preLi){

            preLi.style.border="0";

        }

        preLi=ul.children[position];

        preLi.style.border="1px solid #ff0000";

    }

    //图片轮播的速度

    function animation() {

        requestAnimationFrame(animation);

        autoPlay();

        if(!bool) return;

        if(direction==="left"){

            imgCon.style.left=imgCon.offsetLeft-20+"px";

            if(imgCon.offsetLeft<-rollImage.offsetWidth){

                imgCon.style.left=-rollImage.offsetWidth+"px";

                bool=false;

                direction="";

                imgCon.firstElementChild.remove();

                imgCon.style.left="0px";

            }

        }else if(direction==="right"){

            imgCon.style.left=imgCon.offsetLeft+20+"px";

            if(imgCon.offsetLeft>=0){

                imgCon.style.left="0px";

                bool=false;

                direction="";

                imgCon.lastElementChild.remove();

            }

        }

        changeLi();

    }

    function autoPlay() {

        if(!autoBool) return;

        time--;

        if(time===0){

            direction="left";

            position++;

            if(position===imgList.length) position=0;

            time=120;

            creatNext();

        }

    }

</script>

</body>

</html>

结果截图：（不点击时自动轮播）

 

hemeng0115
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端必备技能——轮播图（原生代码+插件）
2401_84097427的博客
04-22 976
确认插件实现的功能去官网。
从DDCTF2020-拼图题,学习如何做拼图题
qq_36495104的博客
09-07 1591
题目下载 链接：https://pan.baidu.com/s/1BBQw9mOxnrmPm4o68lEpEQ 提取码：i7hm 拿到题目，给了一张图片demo.jpg和一个压缩包，压缩包里为6400个小图片，这6400个小图片是将demo.jpg切割得来的，而flag就在其中几块小图片上。如何找到这几张图片并把它们拼在一起得到flag。 我这里是利用python的CV2库的图像匹配算法，由于修改原图，将flag写入到图片上会造成小图片与原图上相应位置的图片匹配度降低，当匹配度低于某个阈值时，可认为是将.
js实现左右切换轮播图效果
qq_40261601的博客
02-19 4387
js实现图片跑马灯式轮播效果，可点击切换上下张，下方有定位圆点随图片切换激活状态
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
热门推荐
未休的博客
02-18 3万+
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
原生js 之 轮播图 （多功能）
qq_53165476的博客
06-14 636
1）右侧按钮点击，变量++，如果大于等于最后一张，则复原0。4）处理图片自动复原从头播放 (放到变量++后面，紧挨)2）左侧按钮点击，变量--，如果小于0，则复原最后一张。1）准备一个数组对象，里面包含详细信息 (素材包含)2）底部盒子背景颜色和文字内容会变换。3）小圆点随机一个高亮显示。3）鼠标经过暂停定时器。4）鼠标离开开启定时器。
前端必备技能——轮播图（原生代码+插件），前端开发项目
最新发布
2401_84093248的博客
04-05 1165
确认插件实现的功能去官网。
JavaScript案例-js轮播图
02-16
JavaScript案例-js轮播图
JavaScript实现简单图片轮播效果
10-19
主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS轮播图的实现方法2
12-28
本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下 需求： 自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图 效果图： ![轮播图] 思路： 将所有需要轮播的图片横向排列，...
js实现左右按钮图片轮播效果
05-29
js实现带左右箭头图片轮播效果，有详细的中文注释，新手适用。
产品轮播展示JS网页特效
11-13
产品轮播展示JS网页特效
支持手机触摸屏左右滑动的js轮播效果代码
05-10
今天个小伙伴们分享一个好东西，webApp轮播效果，支持手机上用手左右滑动的效果，因为手机的触摸事件和PC端用鼠标操作的事件是不同的，所以我就需要针对移动端的设备触摸事件做相应的轮播特效。大家可以去看下易迅的：http://m.yixun.com/t/ 和淘宝的http://m.taobao.com/ 他们的轮播刚刚就是针对手机做的，在手机观看下你触摸滑动屏幕就可以切换幻灯片。
js实现左右轮播图
01-19
本文实例为大家分享了js实现左右轮播图的具体代码，供大家参考，具体内容如下 我的轮播图功能有：自动播放、点击焦点切换和点击左右按钮切换 效果图： 自动轮播 点击焦点切换 点击左右按钮切换 注意：本文用带背景颜色的li标签指代图片，有需要的话可以将图片插入li标签内 思路： 基础布局和css样式 （1） 给盛放要轮播的图片的盒子绝对定位 js中的代码 （2） 复制第一张图片放在盒子最后，复制最后一张图片放在盒子最前，以保证轮播图左右滑动效果（否则看起来会有一点卡顿） （3）设置盒子位置，通过移动这个盒子的位置，产生图片移动的效果，用定时器设置轮播效果 （4）设置鼠标划入停播事件，设置按
js实现炫酷的左右轮播图
11-26
本文实例为大家分享了js左右轮播图的具体代码，供大家参考，具体内容如下 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta keyword="左右轮播图-效果比较好"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/css.css"> [removed][removed] <script type="
js图片轮播手动切换特效
11-28
先瞄一眼js图片轮播手动切换特效图： 代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style>...
JavaScript 轮播图.rar
04-08
自制经典轮播图样式结构，用html + css + JavaScript代码实现轮播图的动态轮序播放，并支持在html中直接增加或者删减图片所在的li标签来生成动态轮播图
JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播
欢迎━(*｀∀´*)ノ亻来到我的博客
09-07 1万+
效果一： 会自动进行轮播，当鼠标进入轮播图区域会停止轮播，点击左右箭头可以向前、向后进行切换图片 效果二： 这种效果比第一种效果简单，只要删除一些代码和修改一些样式即可。 实现原理 轮播图整体是放在ul里的，li里存放img图片（轮播的图片） <ul> <li> <img> </li> </ul> 给li元素进行绝对定位，且给每个li一个z-index值（堆叠数值，可以理解...
JavaScript轮播图
05-27
JavaScript轮播图可以通过以下步骤来实现： 1. 创建一个HTML结构，包含轮播图容器和轮播图项。 2. 使用CSS样式来设置轮播图容器和轮播图项的样式，如宽度、高度、位置、层级等。 3. 在JavaScript中获取轮播图容器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值