文档章节

轮播 纯js,html实现轮播效果

Lee12
 Lee12
发布于 2017/08/05 13:12
字数 322
阅读 31
收藏 0

第一部分 css样式 主要用到定位与一些简单的效果修饰

* {
                margin: 0;
                padding: 0;
            }
            
                .lb {
                width: 640px;
                height: 270px;
                margin: 10px auto;
            }
            
            #left-arrow {
                position: relative;
                display: inline-block;
                top: -180px;
                z-index: 999;
                cursor: pointer;
            }
            
            #right-arrow {
                position: relative;
                display: inline-block;
                top: -180px;
                right: -540px;
                z-index: 999;
                cursor: pointer;
            }
            
            #num-btn span {
                display: inline-block;
                font-size: 20px;
                width: 23.2px;
                font-family: arial;
                text-align: center;
                border-radius: 50%;
                color: #fff;
                cursor: pointer;
                margin-left: 10px;
            }
            
            #num-btn {
                position: relative;
                top: -100px;
                left: 35%;
            }

第二部分 js修饰

var left = document.getElementById("left-arrow");
            var right = document.getElementById("right-arrow")
            var img = document.getElementById("img");
            var index = 1;
            var btns = getChildren("num-btn","span");
            function getChildren (id,tagname) {
                var arr=document.getElementById(id).childNodes;
                var ele=[];
                for(var i=0;i<arr.length;i++){
                    if(arr[i].tagName==tagname.toUpperCase()){
                        ele.push(arr[i]);
                    }
                }
                return ele;
            }            
            for(var i = 0; i < btns.length; i++) {
                btns[i].onclick = (function() {
                    var j = i + 1;
                    return function() {
                        index = j;
                        img.src = "img/" + index + ".jpg"
                        changebg();
                    }
                })();
            }
            function changebg() {
                for(var i = 0; i < btns.length; i++) {
                    btns[i].style.background = "#000";
                }
                btns[index - 1].style.background = "#f00";
            }
            var moveLeft = function() {
                index++;
                if(index > 7) index = 1;
                img.src = "img/" + index + ".jpg"
                changebg();
            }
            right.onclick = moveLeft;
            left.onclick = function() {
                index--;
                if(index < 1) index = 7;
                img.src = "img/" + index + ".jpg";
                changebg();
            }
            var timer = setInterval(moveLeft, 1000);
            var lb = document.getElementsByClassName("lb")[0];
            lb.onmouseover = function() {
                clearInterval(timer);
            };
            lb.onmouseout = function() {
                timer = setInterval(moveLeft, 1000);
            }

第三部分  body部分

<div class="lb">
            <img src="img/1.jpg" id="img" />
            <img src="img/btn_l.png" id="left-arrow" />
            <img src="img/btn_r.png" id="right-arrow" />
            <div id="num-btn">
                <span style="background: #f00;">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
            </div>
        </div>

这三部分结合在一起就实现一个简单的轮播效果

© 著作权归作者所有

共有 人打赏支持
Lee12
粉丝 4
博文 12
码字总数 11258
作品 0
昆明
前端工程师
记一个JavaScript图片轮播思路与代码

说在前头 喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写...

柚子先生
08/06
0
0
封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放。本篇文章的主要目的是分享封装插件的思路。 轮播图的我一开始是写成非插件形式实现的效...

daisy,gogogo
08/18
0
0
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0
手把手教你用原生JavaScript造轮子(2)——轮播图

通过上一篇文章的学习,我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图,希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Let's ...

csdoker
08/12
0
0
最近排查android webview https的发热耗电和加载速度慢问题解决

最近排查android webview https的发热耗电和加载速度慢问题 问题:H5页面发热耗电 排查:通过android studio profiler 查看CPU消耗曲线,发现静置情况下webview轮播图波浪式消耗CPU,且峰值高...

ljianbing
05/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
3
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
3
0
一个手机装天下,走遍中国都不怕!

导读 “1200元(人民币,下同),微信支付,可以,你扫我。”来自西非马里共和国的展商Albert拿着手机,和一位买走他手鼓的中国游客用简单的汉语交流着。 近日,“第十四届中俄蒙经贸洽谈暨商品...

问题终结者
昨天
2
0
Redis的“死键”问题

大规模的数据库存储系统中,数据的生命周期管理是很有必要的;从业务角度发现过期数据,数据归档和数据碎片整理等。以MySQL为例,1个运行很久的TB级MySQL实例中,极有可能数百GB的数据,对业...

IT--小哥
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部