纯HTML和CSS实现JD轮播图

dendoink 发布于2019-04-23 13:40 / 1462人阅读

摘要：博主使用了纯和实现了的轮播图，没有加动态效果，主要是使用了定位的知识。，如图为两个侧边箭头图片其实实际中应该使用的图标字体，这里没有使用。

　　博主使用了纯HTML和CSS实现了JD的轮播图，没有加动态效果，主要是使用了定位的知识。

　　，如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体，这里没有使用)。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LunBotitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .lunbo{
            margin: 40px auto;
            height: 470px;
            width: 590px;
            position: relative;
        }
        .left,.right{
            position: absolute;
            top: 50%;
            margin-top: -18px;
            width: 24px;
            height: 36px;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .lunbo ul{
            height: 18px;
            width: 151px;
            background: rgba(255,255,255,.3);
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -76px;
            border-radius: 10px;
        }
        .lunbo li{
            height: 14px;
            width: 14px;
            border-radius: 50%;
            background-color: #fff;
            float: left;
            margin: 2px;
        }
        .lunbo .current{
            background-color: #f40;
        }
    style>
head>
<body>
    <div class="lunbo">
        <img src="images/lunbo.jpg" alt="">
        <div class="left"><img src="images/left.png" alt="">div>
        
        <div class="right"><img src="images/right.png" alt="">div>
        <ul>
            <li class="current">li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
        ul>
    div>
body>
html>

实现了如下效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2197.html

原生js + css3 + 定时器无缝轮播图（部分）

摘要：起因现在自学前端中，学到移动端，在做一个项目，课程开始用原生的方法写轮播图无缝，但是视频讲的是面向过程的方式，现在自己用面向对象的方式写一下。 ## 起因 ## 现在自学前端中，学到移动端，在做一个项目，课程开始用原生的方法写轮播图（无缝），但是视频讲的是面向过程的方式，现在自己用面向对象的方式写一下。 ## 上代码 ## html的代码分类 ...

IamDLY 2019-08-23 15:21 评论0 收藏0
vue轮播图插件之vue-awesome-swiper

摘要：移动端轮播图插件，在使用图形界面插件中的组件无法实现触摸滑动后，转而使用插件安装我这里安装的是下面的这个版本使用全局导入样式的话，我这里有用到分页器，就在全局中引入了样式组件引入在中使用常见的小圆点移动端轮播图插件，在使用iview图形界面插件中的carousel组件无法实现触摸滑动后，转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesom...

binta 2019-08-23 12:00 评论0 收藏0
【VIP视频网站项目v1.0.3】基于Nodejs开发的VIP视频网站项目及源码分享

摘要：在线体验地址源码项目预览主页面登录页面注册页面会员中心电影播放页面电影弹幕功能视频网站项目已经完功能如下当前最新版本增加自动抓取功能，网站数据定期实时更新电影和电视剧数据抓取电影数据信息前端展现电影页面图片的自动抓取下载和展示代码结构调整简在线体验地址:http://vip.52tech.tech/ GIthub源码：https://github.com/xiugangzha......

Cympros 2019-08-23 14:50 评论0 收藏0
【VIP视频网站项目v1.0.3】基于Nodejs开发的VIP视频网站项目及源码分享

摘要：在线体验地址源码项目预览主页面登录页面注册页面会员中心电影播放页面电影弹幕功能视频网站项目已经完功能如下当前最新版本增加自动抓取功能，网站数据定期实时更新电影和电视剧数据抓取电影数据信息前端展现电影页面图片的自动抓取下载和展示代码结构调整简在线体验地址:http://vip.52tech.tech/ GIthub源码：https://github.com/xiugangzha......

genefy 2019-08-05 16:04 评论0 收藏0
几种原生js轮播图

摘要：由于各种各样的原因比如说懒，本文直接在代码里面用注释序号记录实现的思路普通版原理一个包含多张图片的其中所有的左浮动成一排，实际过程就是将往左右边移动，改变值。由于各种各样的原因（比如说懒），本文直接在代码里面用注释+序号记录实现的思路 1.普通版原理：一个包含多张图片的ul,其中所有的li左浮动成一排，实际过程就是将ul往左（右）边移动，改变left值。效果图：实际应用的时候.s...

CollinPeng 2019-08-01 17:32 评论0 收藏0