文档章节

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

Lee12
 Lee12
发布于 2017/08/05 13:12
字数 322
阅读 23
收藏 0
点赞 0
评论 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
昆明
前端工程师
Bootstrap 响应式项目分享一

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

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

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

ljianbing
05/28
0
0
使用translate 实现简单轮播图效果

使用translate实现简单轮播图效果,原理是将轮播图的子块使用translate 循环给值 让每一个子块都在一行上面。然后设置定时器 循环移动大块实现轮播图效果。h5代码如下: js代码实现如下: 实...

eleplant_php
07/02
0
0
图片轮播之:静若处子,动若脱兔(为什么我不来写一篇关于图片轮播的博客呢?)

一、闲聊: 图片轮播,一个你再熟悉不过的小东西了。或许在你刚开始学习web的时候就能做出来得到效果。但是你会发现当面对不同的需求的时候又要重新写一个轮播。很是麻烦的对吧。LZ也是这样学...

乐派电影
2014/04/21
0
5
JavaWeb03-HTML篇笔记(二)

1.1 案例一:使用JS完成图片的轮播的效果:1.1.1 需求: 1.1.2 分析:1.1.2.1 技术分析: 【JS中的Window对象的定时的操作】 设置定时的方法 清除定时的方法 1.1.2.2 步骤分析: 【步骤一】创...

我是小谷粒
05/02
0
0
8.轮播图组件及vue-awesome-swiper的引入(手把手教你用vue+node+mongodb搭建一个小商城)

GitHub:https://github.com/Ewall1106/mall 一、新建home.vue 1、上篇我们为了便于展示,把头部组件放在了页面,现在我们删掉里面的头部组件然后我们在view文件里面新建一个页面,然后把头部...

Ewall_
05/30
0
0
纯HTML,CSS实现点击图片,显示内容

之前实现过用纯js实现轮播图切换,以及点击图片显示相关介绍信息,现在用纯HTML,CSS实现一个小功能,这个是跟一个美国朋友学到,非常厉害的一个前端发开程序员。也是他给的我这个思路。 1....

Mrs_CoCo
06/03
0
0
bootstrap常用功能快速入门以及常见问题解决方案

1、图片轮播: 官网上的代码已经给的很清楚了,但是经常会出现问题。要做的很简单,首先引入jquery和bootstrap文件,再将官网上的html代码加上,最后加上一行js代码$('.carousel').carsouse...

fareise
2015/08/31
0
0
关于图片轮播图的一个简单实例 以及实例中发现问题

1.最近在学习JS的过程中,为了巩固水平做了一个简单的轮播图,以及在做的过程中发现一些问题(未解决!希望可以有大佬可以解释这个问题) 2.代码如下:

前端二弟
05/17
0
0
用jquery做一个简单的图片轮播效果

第一步: 1.创建一个js文件夹,把jquery文件放入其中。我这里用的是jquery-1.9.1.min.js版本 2.创建一个images文件夹,放入轮播时所需的图片。(注意,图片大小尽量差不多大) 第二步: 1.新建一...

喝豆浆不放糖
2014/04/13
0
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
1
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
12
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
2
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
2
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
1
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
3
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部