js面向对象---无缝轮播图（附面向过程代码）

最新推荐文章于 2020-09-10 14:02:57 发布
最新推荐文章于 2020-09-10 14:02:57 发布
阅读量1.9k 收藏 4
点赞数
分类专栏： 面向对象 文章标签： 面向对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweetllh/article/details/73927437
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }

            #box{
                width: 800px;
                height: 500px;
                margin: 100px auto;
                overflow: hidden;
                position: relative;
            }
            #imgs{
                position: relative;
                width: 800px;
                height: 500px;  
            }

            #imgs li{
                float: left;
                width: 800px;
                height: 500px;  
            }

            #dots{
                position: absolute;
                bottom: 10px;
                left: 50%;
                margin-left: -92px;
                overflow: hidden;
            }

            #dots li{
                float: left;
                width: 15px;
                height: 15px;
                margin: 5px;
                border: 1px solid #000;
                border-radius: 10px;
                cursor: pointer;
                background: #e8e8e8;
            }

            #dots li.active{width: 45px;}

            #pre,#next{
                position: absolute;
                top: 50%;
                margin-top: -12px;
                width: 22px;
                height: 24px;
                cursor: pointer;
            }
            #pre{
                background: url(img/prev.png);
                left: 20px;
            }

            #next{
                background: url(img/next.png);
                right: 20px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul id="imgs">
                <li><img src="img/0003.jpg"/></li>
                <li><img src="img/0002.jpg"/></li>
                <li><img src="img/thumb_003.jpg"/></li>
                <li><img src="img/0004.jpg"/></li>
                <li><img src="img/0001.jpg"/></li>
            </ul>
            <ul id="dots">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="pre"></div>
            <div id="next"></div>
        </div>
    </body>
    <!--面向对象-->
    <script type="text/javascript">
        window.onload = function(){
            var t1 = new Lb("box");
            t1.l();     //设置包含图片的ul宽度
            t1.dot();   //点哪个圆,相对应的图片显示
            t1.pre();   //向左
            t1.next();  //向右
            t1.auto();  //自动播放
            t1.over();  //鼠标移入
            t1.out()    //鼠标移出
        }

        //  构造函数
        function Lb(id){
            oBox = document.getElementById(id);
            this.oUl = oBox.getElementsByTagName("ul");
            this.oImg = this.oUl[0];
            this.oImg.innerHTML += this.oImg.innerHTML; //无缝轮播的关键
            this.aImgList = this.oImg.getElementsByTagName("li");

            this.oDot = this.oUl[1];
            this.aDotList = this.oDot.getElementsByTagName("li");

            this.oDiv = oBox.getElementsByTagName("div")
            this.oPre = this.oDiv[0];
            this.oNext = this.oDiv[1];

            this.left = this.oImg.offsetLeft;
            this.now = 0;
            this.timer = null;
            this.timer2 = null;


            var _this = this;
            //  向左
            this.oPre.onclick = function(){
                _this.pre(this);
            }

            //向右
            this.oNext.onclick = function(){
                _this.next(this);
            }

            //鼠标移入
            oBox.onmouseover = function(){
                _this.over();
            }

            //鼠标移出
            oBox.onmouseout = function(){
                _this.out();
            }

        }


        //方法
        //设置包含图片的ul宽度
        Lb.prototype.l = function(){
            return this.oImg.style.width = this.aImgList[0].offsetWidth * this.aImgList.length + "px";
        }   


        //点哪个圆,相对应的图片显示,选项卡事件
        Lb.prototype.dot = function(){
            var _this = this;
            for(var i=0;i<this.aDotList.length;i++){
                this.aDotList[i].index = i;
                this.aDotList[i].onclick = function(){  
                    _this.now = this.index;
                    _this.tab();
                }
            }
        }

        Lb.prototype.tab = function(){
            for(var i=0;i<this.aDotList.length;i++){
                this.aDotList[i].className = "";
            }
            this.aDotList[this.now].className = "active";
            this.oImg.style.left = -this.aImgList[0].offsetWidth * this.now +"px";
//          this.move(-this.aImgList[0].offsetWidth * oBtn.index);
            if(this.oImg.style.left <= -this.oImg.style.width/2){
                this.oImg.style.left = 0;
            }
        }




        //向左
        Lb.prototype.pre = function(){
            var _this = this;
            _this.now--;
            if(_this.now==-1){
                _this.now =this.aDotList.length - 1;
            }
            _this.tab();
        }

        //向右
        Lb.prototype.next = function(){
            var _this = this;
            _this.now++;
            if(_this.now==this.aDotList.length){
                _this.now = 0;
            }
            _this.tab();
        }


        //自动播放
        Lb.prototype.auto = function(){
            var _this = this;
             _this.timer2 = setInterval(function(){
                _this.now++;
                _this.now = _this.now%_this.aDotList.length;
                _this.tab();
            },2000);
        }


        //鼠标移入
        Lb.prototype.over = function(){
            clearInterval(this.timer2);
        }


        //鼠标移出
        Lb.prototype.out = function(){
            this.auto();
        }

    </script>
</html>

面向过程代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }

            #box{
                width: 800px;
                height: 500px;
                margin: 100px auto;
                overflow: hidden;
                position: relative;
            }
            #imgs{
                position: relative;
                width: 800px;
                height: 500px;  
            }

            #imgs li{
                float: left;
                width: 800px;
                height: 500px;  
            }

            #dots{
                position: absolute;
                bottom: 10px;
                left: 50%;
                margin-left: -92px;
                overflow: hidden;
            }

            #dots li{
                float: left;
                width: 15px;
                height: 15px;
                margin: 5px;
                border: 1px solid #000;
                border-radius: 10px;
                cursor: pointer;
                background: #e8e8e8;
            }

            #dots li.active{width: 45px;}

            #pre,#next{
                position: absolute;
                top: 50%;
                margin-top: -12px;
                width: 22px;
                height: 24px;
                cursor: pointer;
            }
            #pre{
                background: url(img/prev.png);
                left: 20px;
            }

            #next{
                background: url(img/next.png);
                right: 20px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul id="imgs">
                <li><img src="img/0003.jpg"/></li>
                <li><img src="img/0002.jpg"/></li>
                <li><img src="img/thumb_003.jpg"/></li>
                <li><img src="img/0004.jpg"/></li>
                <li><img src="img/0001.jpg"/></li>
            </ul>
            <ul id="dots">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="pre"></div>
            <div id="next"></div>
        </div>
    </body>

    <!--面向过程-->
    <script type="text/javascript">
        var oBox = document.getElementById("box");
        var oImg = document.getElementById("imgs");
        oImg.innerHTML += oImg.innerHTML; //无缝轮播的关键
        var aImgList = oImg.getElementsByTagName("li");


        var oDot = document.getElementById("dots");
        var aDotList = oDot.getElementsByTagName("li");

        var oPre = document.getElementById("pre");
        var oNext = document.getElementById("next");
        var now = 0;
        var timer = null;
        var timer2 = null;
        //设置包含图片的ul宽度
        oImg.style.width = aImgList[0].offsetWidth * aImgList.length + "px";


        //缓冲运动
        function Move(targ){
            timer = setInterval(function(){
                var left = oImg.offsetLeft;
                var speed = (targ - left)/10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(speed != 0){
                    oImg.style.left = left + speed + "px";
                }
                else{
                    clearInterval(timer);
                }
            },1000);
        }


        function Tab(){
            for(var i=0;i<aDotList.length;i++){
                aDotList[i].className = "";
            }
            aDotList[now].className = "active";
            Move(-aImgList[0].offsetWidth * now);
            if(oImg.style.left <= -oImg.style.width/2){
                oImg.style.left = 0;
            }

        }


        //点哪个圆,相对应的图片显示
        for(var i=0;i<aDotList.length;i++){
            aDotList[i].index = i;
            aDotList[i].onclick = function(){
                now = this.index;
                Tab();
            }
        }

        //向左
        oPre.onclick = function(){
            now--;
            if(now==-1){
                now = aDotList.length - 1;
            }
            Tab();
        }


        //向右
        oNext.onclick = function(){
            now++;
            if(now == aDotList.length){
                now = 0;
            }
            Tab();
        }


        //自动播放
        function auto(){
            timer2 =  setInterval(function(){
                now++;
                now = now%aDotList.length;
                Tab();
            },2000);
        }

        auto();
        oBox.onmouseover = function(){
            clearInterval(timer2);
        }

        oBox.onmouseout = function(){
            auto()
        }

    </script>
</html>
sweetllh
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现无缝轮播（包括面向对象的写法）
12-13
原生js实现无缝轮播（包括面向对象的写法），包括实现思路。
JS案例：轮播图（面向对象），最终版（注释全面）
12-08 766
Html： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"
面向对象—轮播图
mae4a8cs的专栏
02-21 335
大家有木有觉得用面向对象方式写代码。this满天飞，搞得晕头转向的。哈哈！ 多练多写才能更好的领悟 css样式： #box{width:450px;height:270px;background:#ccc;position:relative;} #box  a{width:60px;height:30px; line-height:30px;text-align:center;disp
面向对象-js原生轮播图-从零到一
小方块的世界
05-05 603
js原生轮播图面向对象编程js原生实现轮播图效果1.先看效果图2.需要实现的功能：3.html结构4.功能实现4.1 创建对象4.2动画效果由translateX实现4.3根据轮播图片个数生成数字按钮节点4.4轮播图数字按钮点击切换状态4.5轮播事件，也是点击右箭头的事件4.6事件绑定4.7初始化方法4.8实例化Carousel对象，大功告成5备注 面向对象编程js原生实现轮播图效果 1.先看效果...
面向对象无缝滚动轮播(附带面向过程代码)
bangai2527的博客
12-13 130
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>banner</title> <link rel="stylesheet" href="CSS/main1.css"> </head> <bod...
简单的JS轮播图代码
10-21
JavaScript（JS）轮播图是网页中常见的动态效果，用于展示多张图片或内容并自动循环播放。在本文中，我们将探讨如何实现一个简单的JS轮播图，包括HTML布局、CSS修饰以及JavaScript逻辑。 首先，HTML布局是创建轮播...
如何使用JavaScript实现无缝滚动自动播放轮播图效果
11-19
无缝滚动自动播放轮播图是指通过编程手段让图片列表像无边界地循环滚动一样，当最后一张图片滚动到可视区域后，首张图片紧接着无缝地跟上，形成连续循环播放的效果，常用于网页上的图片展示。实现该效果需综合运用...
平滑滚动的Flash四屏焦点图代码
01-23
焦点图，也被称为幻灯片或轮播图，是网页设计中的一个重要元素。它允许在一个固定的空间内展示多个相关或独立的信息块，通常通过自动切换或用户手动触发来改变显示的内容。这种设计模式能够有效地利用有限的网页空间...
Iafw Ajax FrameWork-开源
04-24
总结，IAFW Ajax Framework是一个强大的前端开发工具，它通过面向对象的设计、强大的Ajax支持和跨浏览器兼容性，简化了网页应用的开发过程。无论你是初学者还是经验丰富的开发者，都可以通过学习和使用IAFW，提升你...
carousel.zip
06-10
无限轮播是一种常见的轮播图效果，使得用户在轮播最后一张图片后还能无缝地返回到第一张图片，营造出无限循环的效果。这通常通过复制首尾图片并在适当的时候进行切换来实现。在实现过程中，开发者需要考虑如何正确...
面向对象实现无缝轮播
L_18351008194的博客
05-12 153
以下是html代码，图片可以随意更改 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initi...
纯js的面向对象的轮播图
qq_43654645的博客
11-09 541
面向对象的轮播图 js文件： /*这里是封装的轮播图js,function Carousel(parent,list,bnList)—HTML进行调用时仅需输入，轮播图的父级，轮播图片 路径数组list、左右按钮图片路径数组。 *此轮播图特点，每次灌入新的信息前都还将之前的信息以及数据进行清空，典型的热更案例 * * 整体思路：创建一个大的容器div：子①放轮播图的imgCon div；...
面向对象 无缝滚动
weixin_34187822的博客
03-06 59
<style> *{ margin:0; padding:0; } #outer{ width:800px; height:450px; overflow:hidden; position:relative; } #inner{ position:absolute; ...
图片轮播效果 面向对象方法
weiqiang_gg的博客
04-13 1107
/*广告图片数组*/ var imgs=[ {"img":"images/index/banner_01.jpg"},   {"img":"images/index/banner_02.jpg"},   {"img":"images/index/banner_03.jpg"},   {"img":"images/index/banner_04.jpg"},   {"img":"imag
js轮播图-面向对象版
wz13759497175的博客
03-27 352
效果图如下:HTML部分:&lt;div id="main"&gt; &lt;ul class="imgBox"&gt; &lt;li&gt;&lt;img src="../images/0.png"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="../images/1.png"&
js面向对象写轮播图
weixin_46500485的博客
09-10 487
面向对象轮播图 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *
JavaScript面向对象写个轮播图
七元八元
08-20 1278
源码： 实战地址 兼容IE，通过透明度控制图片的显示。 1. 面向对象：对外统一提供调用接口的编程思想。     js中Prototype属性解释及常用方法        通过对象的原型属性和方法创建：    在对象原型附加的属性或者方法将成为对象实例化的一部分，类似一个父类，新创建的对象都继承了prototype的属性和方法。这是因为当一个对象被创建时，这个构造函数 将会把它的属性pro...
原生js面向对象实现简单轮播
arzu19740204的博客
11-27 213
平时中我习惯用jquery写轮播效果，实现过程不是很难，也很方便，为了加深对js面向对象的理解，我打算用面向对象实现一个简单的轮播，这里采用了字面量的方式实现。为了实现这个过程，我们要自己动手封装一个运动函数animate，在这里我采用的是匀速运动的方式，这种方式可能体验不是很好，后面分析js代码我在详细解释。废话不多说,先上代码。页面布局可以根据自己的习惯来。 html代码： ...
js 面向对象实现自动轮播图
pengzihui的博客
03-09 1094
js实现面向对象自动轮播图，自动轮播图运用于很多电商平台。也是前端必会的。一项内容效果。 轮播图的实现。需要用到的主要知识点：运动 事件的绑定。事件的委托等等。 css部分: <style> .box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidd...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值