使用css实现轮播图

使用css3实现图片轮播

  • 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等。 本文主要讲述使用纯css3实现轮播图

    工具介绍:

    使用的编辑器: Hbuilder

  • 进入正题

html代码:

    <div id="slide_show">
        <div id="photos">
            <!--
                作者:JavaBuild
                时间:2018-10-21
                描述:轮播图
            -->
            <img id="first_slide_photo" src="images/slideshow_1.png" />
            <img src="images/banner.jpg"/>
            <img src="images/midbanner.jpg"/>

        </div>
    </div>

解释: 定义两个div,第一个div用来确定展示的大小,第二个div用来实现图片的轮播。

css代码:

/* start slide show */
#slide_show {
    /* 第一个div的尺寸 */
    width: 1360px;
    height: 600px;
    /* overflow:hidden 表示超出这个div的展示内容将被隐藏 */
    overflow: hidden;
}

#photos {
    /* calc(1360px * 3) 代表 一共有三张图片 , 每张长度为1360px */
    width: calc(1360px * 3);
    height: 600px;
    /* animation 属性 实现动画效果,switch 动画函数名称,下面会写这个函数,6s代表整个轮播时长, ease-out 方向  infinite 循环轮播 normal 正常结束不反向轮播*/
    -webkit-animation: switch 6s ease-out infinite normal;
}

#photos > img {
    float: left;/* 向左浮动 ,图片连接无缝隙 */
    width: 1360px;
    height: 600px;
}

/* 轮播函数 */
@-webkit-keyframes switch{
    0%, 25% { /* 第1张图所用时长 */
        margin-left: 0px; /* 第一张距离左侧的长度 */
    }
    30%, 60% {/* 第2张图所用时长 */
        margin-left: -1360px; /* 第一张距离左侧的长度 */
    }
    70%, 100% {/* 第3张图所用时长 */
        margin-left: -2720px; /* 第一张距离左侧的长度 */
    }
}

/* end slideshow */

以上即可实现图片的轮播,简单易用。纯css!

原文地址:https://www.cnblogs.com/amazingjava/p/9835817.html

时间: 2024-10-13 08:17:46

使用css实现轮播图的相关文章

用 CSS 做轮播图

对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webkit-animation.做出来的效果自己觉得还可以,唯一的不足就是鼠标点击切换 banner 图和指定到某个图.如果项目中不需要切换变换图片的需求,用 css3 做,何尝不是一种办法.不多说,先上代码: html 代码如下: <div class="test"> <a h

基于css制作轮播图的部分效果

在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将向大家介绍一种最近实验出来的一种方法. 在介绍这种方法之前,本人觉得对于css中的某些伪类选择器有必要进行进一步的分析. hover这个伪类选择器表示的是当鼠标移动到元素上时元素的反应.这一特性与js中的mousemove事件十分的相近,那么其是不是可以被近视地看做该事件呢?下面我们来做一个例子:

js+html+css实现轮播图

首先先把轮播图的结构搭建起来(html),代码如下:  结构可自行搭建,结构搭建完接着就是用css去进行修饰美化   此时的ul是没有给它设置固定的宽和高的,高可以先设置,宽不能,等下让图片一张接一张一的动起来,实际上是改变了ul的left值,ul的宽可以通过图片(li)的宽 乘以 图片数量即可得到,但是不能写死,所以ul的宽我们用js去获取设置,一起看下现在的效果 好了,结构已经搭建完了,现在只是静态的,我们需要用js去让它动起来,我们先获取html中需要用到的元素并把它存给变量,这里我事先存

纯css实现轮播图

轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></div> </div> main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把 好了,先介绍个 css3的api animation: myfirst 5s linear 2s infinite alternat

HTML+CSS +JS 轮播图

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style> 7 #container{ 8 width: 450px; 9 height: 270px; 10 margin: 0 auto; 11 margin-top: 100px; 12 position: relative;

html5+css+JavaScript 轮播图

BEGIN: HTML代码如下 <div id="slideShowContainer"> <ul id="imgUl"> <li> <div class="SlidePic"> <a href="#"><img src="img/g_1.jpeg" alt="" /></a> </div>

CSS3,3D效果轮播图

---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋转属性来完成3D效果的,然后配合原生js的显示隐藏,达到了3D旋转轮播图的效果: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/ht

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

jquery里面的attr和css来设置轮播图竟然效果不一致

/*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document:this) // .querySelectorAll(selector); // return elems.length==0?null:elems.length==1?elems[0]:elems; // } /*广告图片数组*/ var imgs=[ {"i":0,"img&