自动轮播--面向对象实现方式

最新推荐文章于 2022-02-08 14:33:29 发布
最新推荐文章于 2022-02-08 14:33:29 发布
阅读量413 收藏
点赞数 1
分类专栏： JavaScript 文章标签： 面向对象 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36263601/article/details/74967499
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{margin: 0 auto;padding: 0;list-style: none;border: 0; text-align: center;}
    body{background: url(baidu/bg.jpg); -webkit-background-size: cover;
        background-size: cover;}
    .logo{margin-top: 30px; display: block;}
    .links{width: 740px; margin: 0 auto;}
    .links a{color: #fff; margin-right: 10px;}
    .search{margin-bottom: 40px; margin-top: 10px;}
    .search input{width: 537px; height: 40px;}
    .search button{width: 104px; height: 40px;}
    .container{width: 911px;}
    .menu{width: 80px; height: 318px; float: left; background: rgba(0,0,0,0.4);}
    .menu span{width: 80px; height: 35px; line-height: 35px; color: #fff; display: inline-block; font-weight: bold; font-size: 14px;}
    .menu span.choose{background: rgba(255,255,255,0.6) url(baidu/menu.png);}
    .card{width: 813px; height: 318px; float: right; background: rgba(255,255,255,0.6) url(baidu/news.png) right top no-repeat; }


    .loop-img{width: 426px; height: 218px; float: left; position: relative;}
    .loop-img .d-img-frame{width: 426px; height: 260px; position: relative; overflow: hidden; white-space: nowrap;}
    .loop-img .d-img-cell{position: absolute; left: 0; top: 0;}
    .loop-img .d-img-cell a{display: inline-block; width: 426px; height: 260px; outline: none;}
    .loop-img .d-img-cell img{position: relative; left: 0; top: 0;}
    .loop-img .d-img-mask{width: 426px; height: 260px; position: absolute; top: 0; left: 0; cursor: pointer; background-color: #000; opacity: 0.3; transition: opacity 500ms;}
    .loop-img.show-arrow .d-img-mask{opacity: 0; transition: opacity 500ms;}
    .loop-img .d-img-arrow{position: absolute; top: 0; width: 40px; height: 260px; cursor: pointer;}
    .loop-img .go-pre{left: 0;}
    .loop-img .go-next{right: 0;}
    .loop-img .arrow{position: absolute; width: 19px; height: 36px; top: 115px; left: 11px; display: block; background: url(img/arrow.png) no-repeat 1000px;}
    .loop-img.show-arrow .go-pre .arrow{background-position: 0 0;}
    .loop-img.show-arrow .go-next .arrow{background-position: -21px 0;}
    .loop-img.show-arrow .go-pre:hover .arrow{background-position: -40px 0;}
    .loop-img.show-arrow .go-next:hover .arrow{background-position: -61px 0;}
    .loop-img .d-title-mask{position: absolute; top: 232px; height: 28px; left: 0; width: 426px; background: #000; opacity: 0.3;}
    .loop-img .d-title{position: absolute; top: 232px; left: 0; height: 28px; display: block; color: #e6e6e6; text-indent: 15px; text-decoration: none; font-size: 16px; line-height: 30px;}
    .loop-img .d-title:hover{text-decoration: none;}
    .loop-img .d-bars{padding: 8px 0 0 15px; height: 50px; background-color: #191919; text-align: left;}
    .loop-img .d-small{position: relative; text-align: left; width: 80px; display: inline-block;}
    .loop-img .d-small-img{display: inline-block; height: 40px; width: 68px; border: 1px solid #191919;}
    .loop-img .d-small-mask{display: inline-block; position: absolute; top: 0; left: 0; width: 70px; height: 42px; opacity: 0.45; background: #000; cursor: pointer; transition: opacity 500ms;}
    .loop-img .current .d-small-mask,
    .loop-img .d-small-mask:hover{opacity: 0; transition: opacity 500ms;}
    .loop-img .current .d-small-img{border: 1px solid #289cff;}
</style>
<script src='itcast.js'></script>
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
    var imgData = [
        {
            url : 'http://photo.gmw.cn/2013-12/27/content_9938379.htm',
            title : '新浪图片，年度盘点',
            imgUrl : '1'
        },
        {
            url : 'http://photo.gmw.cn/2013-12/27/content_9938379.htm',
            title : '意大利回流茅台拍出78.2万',
            imgUrl : '2'
        },
        {
            url : 'http://photo.gmw.cn/2013-12/27/content_9938379.htm',
            title : '绵阳舰在失联海域发现可疑漂浮物',
            imgUrl : '3'
        },
        {
            url : 'http://photo.gmw.cn/2013-12/27/content_9938379.htm',
            title : '曝奶茶妹妹与70后京东掌门热恋',
            imgUrl : '4'
        },
        {
            url : 'http://photo.gmw.cn/2013-12/27/content_9938379.htm',
            title : '抢购年代，不抢就没了',
            imgUrl : '5'
        }
    ];
</script>
<script type="text/javascript">
    $(function(){
        var News = function(data){
            this.data = data;
            this.num = 0;
            this.length = data.length;
            this.timerBar = null;
            this.init();
        };
        News.prototype = {
            init : function(){
                this.create();
                this.bindEvent();
                this.go();
            },
            create : function(){
                var frameTpl = [
                            '<div class="d-img-frame" num="0">',
                            // '<div class="d-img-cell-shadow">@(bigImgTpl)</div>',
                                '<div class="d-img-cell">@(bigImgTpl)</div>',
                                '<div class="d-img-mask"></div>',
                            '</div>',
                            '<div class="d-img-arrow go-pre">',
                                '<a href="#" onclick="return false;" hidefocus="" class="arrow"></a>',
                            '</div>',
                            '<div class="d-img-arrow go-next">',
                                '<a href="#" onclick="return false;" hidefocus="" class="arrow"></a>',
                            '</div>',
                            '<div class="d-title-mask"></div>',
                            '<a class="d-title" href="@(url)" target="_blank" hidefocus>@(title)</a>',
                            '<div class="d-bars">@(smallImgTpl)</div>',
                        ].join('')
                //大图
                        ,bigImg = [
                            '<a href="@(url)" class="d-img-link" target="_blank">',
                                '<img height="260" width="426" src="@(imgUrl)"/>',
                            '</a>'
                        ].join('')
                //小图
                        ,smallImg = [
                            '<span class="@(curspan) d-small" num="@(num)">',
                                '<img class="d-small-img" height="40" width="68" src="@(imgUrl)"/>',
                                '<span class="d-small-mask"></span>',
                            '</span>'
                        ].join(''),
                        bigTpl = '',
                        smallTpl = '';
                for(var i = 0; i < this.data.length; i++){
                    this.data[i].curspan = i == 0 ? 'current' : '';
                    this.data[i].num = i;
                    this.data[i].imgUrl = 'img/' + this.data[i].imgUrl + '.jpg'
                    bigTpl += $$.formateString(bigImg, this.data[i]);
                    smallTpl += $$.formateString(smallImg, this.data[i]);
                }
                $('.loop-img').html($$.formateString(frameTpl, {
                    bigImgTpl : bigTpl,
                    smallImgTpl : smallTpl,
                    url : this.data[0].url,
                    title : this.data[0].title
                }))
            },
            bindEvent : function(){
                $('.loop-img').on('mouseenter', function(){
                    $('.loop-img').addClass('show-arrow');
                }).on('mouseleave', function(){
                    $('.loop-img').removeClass('show-arrow');
                });
            },
            stop : function(){
                clearInterval(this.timerBar);
                this.timerBar = null;
            },
            go : function(){
                var that = this;
                that.stop();
                that.timerBar = setInterval(function(){
                    that.num++;
                    if(that.num >= that.length){
                        that.num = 0;
                    }
                    // 大图片
                    $('.d-img-cell').css('left', -that.num * 426 + 'px');
                    // 标题
                    $('.d-title').attr('href', that.data[that.num].url).html(that.data[that.num].title);
                    // 小图片
                    var $small = $('.d-small').eq(that.num);
                    $('.d-small').removeClass('current');
                    $small.addClass('current');
                }, 2000);
            }
        }
        new News(imgData);
    })
</script>
<body>
<img class="logo" width="270" src="baidu/logo_white.png" alt="">
<p class="links">
    <a href="http://news.baidu.com" target="_blank">新闻</a>
    <a href="http://www.baidu.com" target="_blank">网页</a>
    <a href="http://tieba.baidu.com" target="_blank">贴吧</a>
    <a href="http://zhidao.baidu.com" target="_blank">知道</a>
    <a href="http://music.baidu.com" target="_blank">音乐</a>
    <a href="http://image.baidu.com" target="_blank">图片</a>
    <a href="http://v.baidu.com" target="_blank">视频</a>
    <a href="http://map.baidu.com" target="_blank">地图</a>
    <a href="http://baike.baidu.com" target="_blank">百科</a>
    <a href="http://wenku.baidu.com" target="_blank">文库</a>
    <a href="http://www.baidu.com/more/" target="_blank">更多&gt;&gt;</a>
</p>
<div class="search">
    <input type="text"><button>百度一下</button>
</div>
<div class="container">
    <div class="menu">
        <span>导航</span>
        <span class="choose">音乐</span>
        <span>新闻</span>
    </div>
    <div id="card" class="card"><div id="loop_img" class="loop-img"></div></div>
</div>
</body>
</html>
强哥blog
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
轮播图（面向对象）
weixin_45261642的博客
08-09 841
轮播图，效果如下 一、js文件 1.Utils类 export default class Utils{ static ce(type,style,parent){ var elem=document.createElement(type); if(style){ for(var prop in style){ elem.style[prop]=style[prop]; } }
js 面向对象实现自动轮播图
pengzihui的博客
03-09 1107
js实现面向对象自动轮播图，自动轮播图运用于很多电商平台。也是前端必会的。一项内容效果。 轮播图的实现。需要用到的主要知识点：运动 事件的绑定。事件的委托等等。 css部分: <style> .box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidd...
原生js实现无缝轮播（包括面向对象的写法）
12-13
原生js实现无缝轮播（包括面向对象的写法），包括实现思路。
面向对象—轮播图
mae4a8cs的专栏
02-21 340
大家有木有觉得用面向对象方式写代码。this满天飞，搞得晕头转向的。哈哈！ 多练多写才能更好的领悟 css样式： #box{width:450px;height:270px;background:#ccc;position:relative;} #box  a{width:60px;height:30px; line-height:30px;text-align:center;disp
面向对象实现无缝轮播
L_18351008194的博客
05-12 179
以下是html代码，图片可以随意更改 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initi...
面向对象的轮播
weixin_34293059的博客
01-15 74
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .clearfix:after{ clear: both; content: ""; height:0; display: blo...
面向对象轮播
weixin_30849591的博客
10-20 71
/*面向对象的图片轮播,图片的最后一张是第一张图,图片的第一张是最后一张图,鼠标移入暂停轮播,可点击按钮和页码切换图片使用时需要获取一下对应的元素对象*/ // var outer = $("#outer");//获取最大的框// var oInner = $("#inner");//获取ul// var...
0原生js-面向对象-无缝轮播图.zip
09-29
- **自动播放**：设置定时器，定期调用滑动方法，实现自动轮播。 - **边界处理**：当到达轮播图的最后或最前时，需要实现无缝循环，即切换到第一张图片时实际上显示最后一张，反之亦然。 4. **优化与兼容性** - ...
carousel-slide:JQuery面向对象实现无限轮播组件
04-30
自动轮播 左右按钮点击切换上一张、下一张 底部状态随轮播索引变化 鼠标移入/移除，轮播停止/继续 实现思路 面向对象方法编程 初始化 绑定事件 为事件添加方法 调用 难点 该组件为无限轮播组件，CSS把图片并排，当向...
JavaScript基于面向对象实现的无缝滚动轮播示例
10-15
在这个无缝滚动轮播的示例中，我们看到如何利用面向对象的思想来构建一个可重用的组件。 首先，定义了一个名为`Seamless`的构造函数，它接收一个参数`obj`，这个参数通常是轮播容器的ID。在构造函数内部，我们通过`...
js实现轮播图的两种方式(构造函数、面向对象)
10-19
在构造函数和面向对象两种实现方式中，核心逻辑基本相同，主要的区别在于组织代码结构和创建实例的方式。构造函数适合于简单的场景，而面向对象则更易于扩展和维护，特别是当轮播图功能变得复杂时，面向对象的优势...
面向对象轮播图
Cupid
07-14 127
面向对象轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &lt
图片轮播效果 面向对象方法
weiqiang_gg的博客
04-13 1109
/*广告图片数组*/ 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
面向对象的轮播图
qq_41628507的博客
03-09 709
面向对象的轮播图 轮播图是网页中一种比较常见的功能，接下来我们使用面向对象的方法来实现点击左右按钮使轮播图进行轮播，以及点击相应的数字使轮播图出现对应的图片 分析： 当前的布局方式，可以采取同时控制两个索引的方式，让图片动起来 一个索引表示要走的图片，另一个索引表示要进来的图片。接下来选择元素，绑定事件，计算索引，根据索引移动对应的图片 body部分代码 <div id="b...
JavaScript轮播图（面向对象）
qq_45799465的博客
02-08 1673
步骤 轮播图1 HTML+CSS 轮播图2 动态生成页面 通过 JavaScript程序 生成 div标签中 所有 轮播图需要的标签 生成 ul ol div 标签节点 根据数组动态生成 原始 ul>li ol>li ul > li > img ol > li 第一个li添加 class,active 将生成的 ul>li ol>li 字符串 写入 ul ol 标签节点 将 ul ol div 标签节点 写入 轮播图div中 获取 原始 ul.
面向对象做的轮播图
qq_43139605的博客
07-07 284
面向对象做的轮播图 css部分 <style> * { margin: 0; padding: 0; list-style: none; } .box { width: 500px; height: 400px; border: 1px solid #000; margin: 50p
面向对象的图片轮播
weixin_45052104的博客
07-18 159
<script src="js/js.js"></script> </head> <body> <div id="slide1" class="container"> <ul> <li><a href="http://www.1000phone.com"><i...
js 面向对象实现自动轮播
最新发布
03-28
以下是一个js面向对象实现自动轮播的示例代码： ```javascript // 定义轮播图类 class Slider { constructor(container, options = {}) { this.container = container; this.slides = container....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值