轮播图的四种实现方式

最新推荐文章于 2024-06-17 15:29:34 发布
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量3k 收藏 4
点赞数 1
分类专栏： 页面显示
原文链接：http://helloweb.wang/qianduankaifa/3569.html
版权

一、插件Element ui

Carousel走马灯

<template>
  <div class="block">
    <span class="demonstration">默认 Hover 指示器触发</span>
    <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="block">
    <span class="demonstration">Click 指示器触发</span>
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>

二、使用js实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        #loopDiv{
            width: 790px;
            height: 340px;
            margin: 0 auto;
            position: relative;
        }
         
        #list{
            list-style: none;
         
            position: absolute;
            bottom: 10px;
            left: 250px;
        }
        #list li{
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background: #aaa;
            margin-right: 10px;
        }
        .chooseBut{
            width: 50px;
            height: 80px;
            background-color: rgba(0,0,0,0.2);
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            display: none;
        }
        #left{
            position: absolute;
            left: 0px;
            top: 130px;
        }
        #right{
            position: absolute;
            right: 0px;
            top: 130px;
        }
    </style>
</head>
<body>
    <div id="loopDiv">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <div id="left"><</div>
        <div id="right">></div>
    </div>
    <script type="text/javascript">
        var jsDivBox = document.getElementById("loopDiv");
        //图片节点
        var jsImg = document.getElementById("pic");
        //左右按钮节点
        var jsLeft = document.getElementById("left");
        var jsRight = document.getElementById("right");
        //获取所有的li
        var jsUl = document.getElementById("list");
        var jsLis = jsUl.getElementsByTagName("li");
        //让第一个小圆点变为红色
        jsLis[0].style.backgroundColor = "red";
         
        //显示当前的图片下标
        var currentPage = 0;
         
        //启动定时器
        var timer = setInterval(func, 1000);
        function func() {
            currentPage++;
            changePic();
         
        }
        function changePic() {
            if (currentPage == 8) {
                currentPage = 0;
            }
            if (currentPage == -1) {
                currentPage = 7;
            }
            //更换图片
            //"img/1.jpg"
            jsImg.src = "img/" + currentPage + ".jpg";
            //将所有的小圆点颜色清空
            for (var i = 0; i < jsLis.length; i++) {
                jsLis[i].style.backgroundColor = "#aaa";
            }
            //改变对应小圆点为红色
            jsLis[currentPage].style.backgroundColor = "red";
        }
         
        //鼠标进入
        jsDivBox.addEventListener("mouseover", func1, false);
        function func1() {
            //停止定时器
            clearInterval(timer);
            //显示左右按钮
            jsLeft.style.display = "block";
            jsRight.style.display = "block";
        }
        //鼠标移出
        jsDivBox.addEventListener("mouseout", func2, false);
        function func2() {
            //重启定时器
            timer = setInterval(func, 1000);
         
            //隐藏左右按钮
            jsLeft.style.display = "none";
            jsRight.style.display = "none";
        }
             
        //点击左右按钮
        jsLeft.addEventListener("click", func3, false);
        function func3() {
            currentPage--;
            changePic();
        }
        jsLeft.onmouseover = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.6)";
        }
        jsLeft.onmouseout = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.2)";
        }
        jsRight.addEventListener("click", func4, false);
        function func4() {
            currentPage++;
            changePic();
        }
        jsRight.onmouseover = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.6)";
        }
        jsRight.onmouseout = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.2)";
        }
                 
        //进入小圆点
        for (var j = 0; j < jsLis.length; j++) {
            jsLis[j].onmouseover = function() {
                currentPage = parseInt(this.innerHTML) - 1;
                changePic();
            };
        }
    </script>
</body>
</html>

三、使用jQuery实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .pic{
            width: 790px;
            height: 340px;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .content{
            width: 99999px;
            height: 340px;
            position: absolute;
            left: 0px;
            top: 0px;
 
        }
        .content img{
            float: left;
        }
        .index{
            position: absolute;
            left: 300px;
            bottom: 5px;
            width: 200px;
            height: 20px;
            list-style: none;
        }
        .index li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
            background-color: rgba(100,100,100,0.3);
        }
 
        .left{
            width: 30px;
            height:50px;
            background-color:rgba(100,100,100,0.5);  
            position: absolute;
            left: 0px;
            top: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: none;
        }
        .right{
            width: 30px;
            height:50px;
            background-color:rgba(100,100,100,0.5);  
            position: absolute;
            right: 0px;
            top: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: none;
        }
        .index .first{
            background-color: red;
        }
 
    </style>
    <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
</head>
<body>
    <div>
        <div>
            <img src="1.jpg"/>
            <img src="2.jpg"/>
            <img src="3.jpg"/>
            <img src="4.jpg"/>
            <img src="5.jpg"/>
            <img src="6.jpg"/>
            <img src="7.jpg"/>
            <img src="8.jpg"/>
        </div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div>></div>
        <div><</div>
    </div>
    <script type="text/javascript">
        $(function(){
            //每个固定的时间移动图片
            var timer = setInterval(picLoop,1000);
            var index = 0;
            function picLoop(){
                index++;
                if (index==8) {index=0;}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
            }
 
            //定时器的控制
            $(".pic").hover(function(){
                clearInterval(timer);
                $(".left").show();
                $(".right").show();
            },function(){
                timer = setInterval(picLoop,1000);
                $(".left").hide();
                $(".right").hide();
            })
 
            $("li").mouseover(function(){
                $(this).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
                index = $(this).index();
                $(".content").animate({"left":-790*index},300);
 
            })
 
            $(".left").click(function(){
                index--;
                if (index==-1) {index=7;}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
            })
            $(".right").click(function(){
                index++;
                if (index==8) {index=0}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)"); 
            })
 
        })
    </script>
</body>
</html>

四、css3实现(轮播实用性差)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        * {
            margin:0;
            padding:0;
        }
 
        ul {
            list-style:none;
        }
        .loop{
            position: relative;
            margin:30px auto;
            width:600px;
            height:300px;
        }
         
        #wrap {
             position:relative;
             width:600px;
             height:300px;
             border:1px solid #9cc5ef;
             overflow:hidden;
        }
         
        #slider {
              width:300%;
              height:100%;
              font:100px/400px Microsoft Yahei;
              text-align:center;
              color:#fff;
              margin-left:0;
              -webkit-animation:slide1 3s ease-out infinite;
        }
         
        #slider li {
              float:left;
              width:600px;
              height:100%;
        }
        #slider img{
             width:600px;
             height:100%;
        }
        /*创建三种动画策略*/
        @-webkit-keyframes slide1 {
          0% { margin-left:0;}
          23% { margin-left:0;}
          33% { margin-left:-600px;}
          56% { margin-left:-600px;}
          66% { margin-left:-1200px;}
          90% { margin-left:-1200px;}
          100% {margin-left:0;}
        }
         
        @-webkit-keyframes slide2 {
          0% { margin-left:-600px;}
          23% { margin-left:-600px;}
          33% { margin-left:-1200px;}
          56% { margin-left:-1200px;}
          66% { margin-left:0;}
          90% { margin-left:0;}
          100% {margin-left:-600px;}
        }
         
        @-webkit-keyframes slide3 {
          0% { margin-left:-1200px;}
          23% { margin-left:-1200px;}
          33% { margin-left:0;}
          56% { margin-left:0;}
          66% { margin-left:-600px;}
          90% { margin-left:-600px;}
          100% {margin-left:-1200px;}
        }
         
         
        /*当我们点击对应按钮时显示对应的动画*/
        #first:checked ~ #wrap #slider {
          -webkit-animation-name:slide1;
        }
         
        #second:checked ~ #wrap #slider {
          -webkit-animation-name:slide2;
        }
         
        #third:checked ~ #wrap #slider {
          -webkit-animation-name:slide3;
        }
         
         
        /*短暂地取消动画名称，模拟重启动画*/
        #first:active ~ #wrap #slider {
          -webkit-animation-name:none;
          margin-left:0;
        }
         
        #second:active ~ #wrap #slider {
          -webkit-animation-name:none;
          margin-left:-600px;
        }
         
        #third:active ~ #wrap #slider {
          -webkit-animation-name:none;
          margin-left:-1200px;
        }
        #opts {
          width:600px;
          height:40px;
          margin:auto;
          color:#fff;
          text-align:center;
          font:16px/30px Microsoft Yahei;
          position: absolute;
          top: 260px;
          left: 250px;
        }
         
        #opts label {
          float:left;
          width:30px;
          height:30px;
          margin-right:10px;
          background:#cccccc;
          cursor:pointer;
          border-radius: 50%;
        }
         
        #opts label:hover {
          background:#405871;
        }
         
        /* 隐藏Input按钮*/
        #first, #second, #third {
          display:none;
        }
 
        </style>
    </head>
    <body>
        <div class="loop">
            <input type="radio" name="slider" id="first">
            <input type="radio" name="slider" id="second">
            <input type="radio" name="slider" id="third">
               
            <div id="wrap">
              <ul id="slider">
                <li><img src="1.jpg"/></li>
                <li><img src="2.jpg"/></li>
                <li><img src="3.jpg"/></li>
              </ul>
            </div>  
            <div id="opts">
              <label for="first">1</label>
              <label for="second">2</label>
              <label for="third">3</label>
            </div>
        </div>
    </body>
</html>

zhouzhenxxxx
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android轮播图实现方案,Android轮播图实现教程
weixin_42567279的博客
05-26 3202
ListView的headerView设置为轮播图之后结合上/下拉刷新/加载的模式成为现在大多数APP的一个必须具备的功能，对于许多初学者来说想要实现轮播图这样一个集线程睡眠、自动处理、替换过程中刷新UI界面的组合功能非常困难，没有思路，感觉无从下手，去搜索各种实现方案，发现目前充斥着大量的类似于使用弃用组件Gallery这样的例子。本篇博客将通过分析轮播图的各个注意事项及实现思路来实现一个简易的...
unity实现图片轮播效果_Unity实现图片轮播组件
weixin_39636610的博客
12-22 1488
游戏中有时候会见到图片轮播的效果，那么这里就自己封装了一个，包括自动轮播、切页按钮控制、页码下标更新、滑动轮播、切页后的回调等等 。下面，先上一个简陋的gif动态效果图从图中可以看出，该示例包括了三张图片的轮播，左右分别是上一张和下一张的按钮，右下角显示了当前是第几章的页码下标。直接上脚本：using System;using System.Collections;using System.Col...
html实现可以折叠的轮播图,四种方式实现轮播图
weixin_29391349的博客
05-31 2251
不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~为了方便大家观看，我把css，html，js都写在一个文件里。swiper插件实现轮播图swiper是一个实现轮播图很强大，上手也容易。并且也是现在...
原生js实现轮播图的两种方式
h395910638的博客
06-17 492
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
四种方式实现轮播图
热门推荐
weixin_41897234的博客
06-11 9万+
转载自：http://www.jianshu.com/p/bd1f34e7e953 不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。 轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在...
【转】四种方式实现轮播图
liangtaox8的博客
07-03 1290
转载自：http://www.jianshu.com/p/bd1f34e7e953 不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。 轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~ 为了方便大家观看，我把css，html，js都写在一...
html按钮轮播图,四种方式实现轮播图
weixin_42297705的博客
06-16 3148
不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~为了方便大家观看，我把css，html，js都写在一个文件里。swiper插件实现轮播图swiper是一个实现轮播图很强大，上手也容易。并且也是现在...
js实现轮播图——三种切换方式
清风无虑skr的博客
10-26 3962
js轮播定时切换与点击切换 原本想用css实现轮播效果，就是改变透明的来实现轮播，但感觉太low了，于是便用JavaScript实现了，因为刚接触没多久所以写的不好。 先给大家看看效果图： 图片是我电脑保存的，如果要用的话可以把内的图片地址改下。 HTML <div class="ad" id="ad"> <div class="pics" id="pics"&...
24小时轮播怎么实现的_四种方式实现轮播图
weixin_29358723的博客
02-15 831
不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~为了方便大家观看，我把css，html，js都写在一个文件里。swiper插件实现轮播图swiper是一个实现轮播图很强大，上手也容易。并且也是现在...
html原生轮播图的实现,使用原生js以两种方式制作一个精美的轮播图(下)
weixin_42480540的博客
05-31 849
展示界面 & github源码(这里可以实现PC端模拟移动端左右滑动图片切换的效果)github源码(包含两种方式实现轮播图的源码)前言如何用原生js实现一个简单的轮播图呢？前面我已经用一种方法实现了，可能有些小伙伴觉得那种方法写的轮播图有点low，不够炫酷。那么，那就请看看下面这种方法实现的轮播图吧！现在我就分享第二种使用原生js实现轮播图的方法，这种方法制作轮播图的原理主要是控制所有图...
Unity实现图片轮播组件
08-26
9. 实现切页后的回调：可以使用 Unity 事件系统来实现切页后的回调，例如在图片切换后触发某个事件。 10. 使用 namespace 来组织代码：可以使用 namespace 来组织代码，例如 UnityEngine.UI，来避免命名冲突。 11....
简单的jquery四张图片轮播滚动切换效果代码
11-17
在网页设计中，图片轮播是一种常见的展示方式，它可以高效地利用有限的空间展示多张图片。jQuery作为一个轻量级、功能丰富的JavaScript库，提供了强大的DOM操作和事件处理能力，使得实现图片轮播效果变得简单易行。...
Android中使用imageviewswitcher 实现图片切换轮播导航的方法
01-20
`ImageViewSwitcher` 是Android SDK提供的一种方便的控件，用于在不同的图片之间进行平滑的切换，非常适合创建幻灯片或者轮播图的效果。本文将详细介绍如何使用 `ImageViewSwitcher` 实现图片切换轮播导航。 首先，...
jQuery手风琴图片轮播切换
04-07
轮播切换与焦点图类似，都是用来集中展示多个图片或内容的方式。焦点图通常会在屏幕中央突出显示当前选中的项，其余项则处于模糊或隐藏状态。结合手风琴效果，可以实现一个既节省空间又能吸引用户注意力的焦点图组件...
Android开发实现的自动换图片、轮播图效果示例
08-26
Android 开发实现自动换图片、轮播图效果示例 Android 开发中，实现自动换图片、轮播图效果是非常常见的需求，本文将通过一个示例，介绍如何使用 Android ImageView 及界面布局相关操作技巧来实现自动换图片、轮播...
开关电源中，穿越频率的大致选择范围
08-05
在开关电源设计之中，穿越频率是一个相当重要的指标。在文中从就开关电源设计中的环路反馈控制方法、环路增益作 用进行了阐述。并在此基础上就穿越频率选取的限制条件进行分析，为开关电源设计中的穿越频率选取提供借鉴。 穿越频率 ；开关电源设计 ；选取方法 ；限制条件 开关电源设计过程中，环路反馈控制回路的的性能决定了电 源的精度和整体性能，因此设计一个优良的环路控制回路对开发 一个开关电源系统至关重要。其中穿越频率的选取又是反馈回路 设计中的关键因数。
销售员各月销售提成计算.xlsx.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
营销数据看板-多样式分析销售数.xlsx.xlsx
最新发布
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值