文档章节

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

Lee12
 Lee12
发布于 2017/08/05 13:12
字数 322
阅读 46
收藏 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
粉丝 5
博文 12
码字总数 11258
作品 0
昆明
前端工程师
私信 提问
记一个JavaScript图片轮播思路与代码

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

柚子先生
2018/08/06
0
0
Bootstrap 响应式项目分享一

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

Neuro_annie
2017/12/27
0
0
封装一个简单的原生js焦点轮播图插件

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

daisy,gogogo
2018/08/18
0
0
手把手教你用原生JavaScript造轮子(2)——轮播图

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

csdoker
2018/08/12
0
0
授人以渔式解析原生JS写轮播图

需求与分析 需求: 循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左...

Sadhu
2018/10/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
2
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部