文档章节

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

Lee12
 Lee12
发布于 2017/08/05 13:12
字数 322
阅读 37
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

Pycharm上Django的使用 Day8

1.添加新条目 1>编写用于添加新条目的表单 在forms.py中创建一个与模型Entry相关联的表单 1处给字段'text'指定一个空标签 2处定义小部件widgets,widgets是一个HTML表单元素 2>定义new_entry...

不会TC的猫
17分钟前
2
0
MongoDB副本集

MongoDB介绍 早期版本使用master-slave,一主一从和MySQL类似,但slave在此架构中为只读,当主库宕机后,从库不能自动切换为主 目前已经淘汰master-slave模式,改为副本集,这种模式下有一个...

chencheng-linux
30分钟前
1
0
WebService 客户端记录

https://blog.csdn.net/qiuhan/article/details/49487009

呼呼南风
30分钟前
0
0
七牛云彭垚:智能平台的创新和发展

2018 年 11 月 14 日至 11 月 18 日,第二十届中国国际高新技术成果交易会(简称高交会)在深圳成功举办,七牛云作为国内领先的以数据智能和视觉智能为核心的企业级云计算服务商受邀参展。 ...

七牛云
36分钟前
0
0
Java内存模型原理,你真的理解透彻了吗?

内存模型产生背景 在介绍 Java 内存模型之前,我们先了解一下物理计算机中的并发问题,理解这些问题可以搞清楚内存模型产生的背景。 物理机遇到的并发问题与虚拟机中的情况有不少相似之处,物...

小刀爱编程
41分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部