轮播图

用js和CSS写图片切换效果（轮播图）

千次阅读 多人点赞 2019-01-18 13:56:07

用js和CSS写图片切换效果（轮播图）、 ** 学习前提** 了解CSS伪类元素，css3过度效果对js拥有基础的了解。清楚图片切换原理。 &lt;!doctype html&gt; &lt;html lang="...

用js和CSS写图片切换效果（轮播图）、 
** 学习前提** 
了解CSS伪类元素，css3过度效果
对js拥有基础的了解。
清楚图片切换原理。 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词">
    <meta name="Description" content="描述">
    <title>CSS3轮播图</title>
    <style>
        body{
            background:#ccc;
        }
        #wrap{
            width:640px;
            margin:100px auto;
            position:relative;
            padding-top:320px;
            overflow: hidden;
        }
        #wrap>img{
            position:absolute;left:0px;top:0px;
            transition:all 1s;
        }
        img{
            display:block;

        }
        input{
            display:none;
        }
        label{
            border:2px solid #aaa;
            margin:20px 3px;
            float:left;
            width: 10px;

        }
        input:checked + label{
            border:8px solid #fff;
            opacity:1;
        }
        input ~ img{
            opacity:0;
            transform:scale(1.1);
        }
        input:checked + label + img{
            opacity:1;
            transform:translate(0px);
        }
        .before
        {
            width: 50px;
            height: 320px;
           position: absolute;
            top:0px;
            left:0px;
            z-index:2;
            background: rgb(126, 131, 120, 0.31);
            border: none;
            outline: none;

        }
        .after
        {
            width: 50px;
            height: 320px;
            position: absolute;
            top:0px;
            right:0px;
            z-index:2;
            background: rgb(126, 131, 120, 0.31);
            border:none;
            outline: none;
        }
        .before:active{
            boeder:none;
        }
    </style>
</head>
<body>
<div id="wrap">
    <input type="radio" name="checked" id="id1" checked >
    <label for="id1" id="d1" onclick="eventclick(this.id)">
      1
    </label>
    <img src="images/1.jpg" width="640" height="320">
    <input type="radio" name="checked" id="id2">
    <label for="id2" id="d2" onclick="eventclick(this.id)">
      2
    </label>
    <img src="images/2.jpg" width="640" height="320">
    <input type="radio" name="checked" id="id3">
    <label for="id3" id="d3" onclick="eventclick(this.id)">
      3
    </label>
    <img src="images/3.jpg" width="640" height="320">
    <input type="radio" name="checked" id="id4" >
    <label for="id4" id="d4" onclick="eventclick(this.id)">
        4
    </label>
    <img src="images/4.jpg" width="640" height="320">
    <input type="radio" name="checked" id="id5" >
    <label for="id5" id="d5" onclick="eventclick(this.id)">
      5
    </label>
    <img src="images/5.jpg" width="640" height="320">
    <button class="before" id="before" >
        前
    </button>
    <button class="after" id="after">
        后
    </button>
</div>
</body>
<script>
    var wrap = new Array();
    var wp=document.getElementById("wrap");
    var before =document.getElementById("before");
    var after = document.getElementById("after");
   for(var i =1;i<=5;i++)
   {
       wrap[i]=document.getElementById("id"+i);
   }
    var j=1;
    function changeImg() {
        ba(j);
        if (j==wrap.length)
        {
            j=0;
        }
        else
        {
            wrap[j].click();
        }
        j++;


    }
    var run=setInterval(changeImg,2000);//每秒重置该函数
    wp.onmousemove=function () {
        clearInterval(run);
    }
    wp.onmouseout=function(){
        run=setInterval(changeImg,2000);
    }
    function ba(j) {
        var i,k;
        i=j;
        k=j;
        before.onclick=function () {
           if(i==wrap.length)
           {
               i=5;
           }
            else if(i==1)
           {
               i=6;
           }
           i--;
               wrap[i].click();
        }
        after.onclick=function () {
            if(k==wrap.length)
            {
                k=0;
            }

            ++k;
            wrap[k].click();

        }
         return j;
    }
    function eventclick(self) {
       var id =self;
        if (id=="d1")
        {
            j=1;
        }
        if (id=="d2")
        {
            j=2;
        }
       if (id=="d3")
       {
           j=3;
       }
        if (id=="d4")
        {
            j=4;
        }
        if (id=="d5")
        {
            j=5;
        }

    }
</script>
</html>
 
这个还有些问题，有人知道请告诉我！

收起

展开全文

Swiper实现轮播图效果
2020-12-13 02:16:33
本文实例为大家分享了Swiper实现轮播图效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title>...
收起
js实现点击左右按钮轮播图片效果实例
2020-10-24 19:28:44
主要介绍了js实现点击左右按钮轮播图片效果的方法,涉及click事件相应、animate方法等使用技巧,需要的朋友可以参考下
收起

JS 轮播图图片切换（定时器）

万次阅读 多人点赞 2019-08-13 22:10:50

JS 轮播图 图片切换（定时器）这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117

标题JS 轮播图 图片切换（定时器） 
这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。
 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
 此次全部的代码都在下面，有注释，并有效果图如下： 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片切换</title>
    <style>
        .picture {
            position: relative;
            width: 500px;
            height: 333px;
            margin: 0 auto;
            border: 2px solid rgb(231, 127, 217);
            overflow: hidden;
        }

        .radius {           /* 圆点所在的p (容器)  */
            width: 100%;
            height: 10px;
            position: absolute;
            bottom: 30px;
            text-align: center;
        }

        .pg {                         
            position: absolute;
            margin: 0;
            width: 100%;
            height: 20px;
            background-color: rgba(0, 0, 0, .4);
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
        }

        .title {
            position: absolute;
            width: 100%;
            bottom: 0px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: rgb(21, 223, 72);
        }

        span {
            display: inline-block;
            border: 10px solid #fdfdfd;
            border-radius: 50%;
        }

        .active {
            border: 10px solid #656466;
        }

        /* 左右箭头  */
        .arrowhead-left,
        .arrowhead-right {
            position: absolute;
            width: 41px;
            height: 69px;
            font-size: 30px;
            line-height: 70px;
            text-align: center;
            color: #D6D8D4;
            background-color: rgba(0,0,0,.3);
        }

        .arrowhead-left {
            left: 0;
            top: 40%;
        }

        .arrowhead-right {
            right: 0;
            top: 40%;
        }
    </style>
</head>

<body>
    <div class="picture">
        <!-- 图片页码 -->
        <p class="pg">封面</p>
        <img src="./image/d8.jpeg" alt="">

        <!-- 小圆点点 -->
        <p class="radius"></p>
        <!-- 图片的下面标题 -->
        <p class="title">标题</p>

        <!-- 左右箭头 -->
        <div class="arrowhead-left" id="al"> < </div> 
        <div class="arrowhead-right" id="ar"> > </div>
    </div>

    <script>
        var address = ["./image/d1.jpeg", "./image/d2.jpeg", "./image/d3.jpeg", "./image/d4.jpeg", "./image/d5.jpeg", "./image/d7.jpeg"];
        //  var imgs = document.getElementsByTagName("img");
        var imgs = document.querySelector("img");
        var len = address.length;               //图片地址的数量为len
        var str = "";
        var pp = document.getElementsByTagName("p");//获取的是p标签的集合
        //  var pp  = document.querySelector("p");    //获取的是一个元素
        var al = document.getElementById("al");
        var ar = document.getElementById("ar");
        var n = 0 ;

        //添加span标签（小圆点），个数为len个
        for (i = 0; i < len; i++) {
            str += ' <span></span>'
        }
        pp[1].innerHTML = str;
       
        var spans = pp[1].getElementsByTagName('span');  //获取p[1]里所有span标签
        spans[0].className = 'active';                  //给第一个span标签添加样式 active

        for (i = 0; i < len; i++) {
            spans[i].index = i;              //自定义索引值
        
            spans[i].onmouseover = function () {            //鼠标指向圆点时的事件
                for (i = 0; i < len; i++) {
                    spans[i].className = "";               //通过循环，清除所有圆点的类名
                }
                n=this.index ;
                this.className = 'active';                 //给鼠标移入的圆点添加类名
                imgs.src = address[this.index];
                pp[0].innerHTML = [this.index + 1] + "/6";    
                pp[2].innerHTML = "风光" + [this.index + 1];
                
            }
           
        }
            
        ar.onclick = function () {            //右侧箭头，点击一次图片向右换一张
            n++;
           if (n>5) {
              n=0;  
           } 
           for (i = 0; i < len; i++) {
                spans[i].className = "";
            }

            spans[n].className = "active";
            imgs.src = address[n];
            pp[0].innerHTML = (n+1) + "/6";
            pp[2].innerHTML = "风光" +(n+1);
          
        }

        al.onclick = function () {        // //左侧箭头，点击一次图片向左换一张
          n--;
         if (n<0) {
             n=(len-1);
         }
         for (i = 0; i < len; i++) {
              spans[i].className = "";
          }         
          spans[n].className = "active";
          imgs.src = address[n];
          pp[0].innerHTML = (n+1) + "/6";
          pp[2].innerHTML = "风光" +(n+1);
        } 
       
       setInterval(ar.onclick,3000);             //添加定时器  setInterval（函数，间隔时间单位为毫秒）
                                                 //此次添加的函数为点击右侧箭头，间隔为3秒
    </script>
</body>

</html>
 
与上次相比，仅仅添加了一句 setInterval(ar.onclick,3000);
 setInterval（函数，间隔时间单位为毫秒）
 ar.onclick是点击右侧箭头的函数，3000是3000毫秒，既3秒。 
（请忽略图片上的水印，随便找的一个做动图的软件，带水印-_-！）

收起

展开全文

javascript实现点击按钮切换轮播图功能
2020-10-14 17:54:45
主要为大家详细介绍了javascript实现点击按钮切换轮播图功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
收起
网站前端——图片左右切换（轮播图）
2017-09-15 22:35:29
可以在网页实现图片左右切换，即轮播图。使用bootstraps框架，不需要css、js文件。导入即可使用。图片的数量和样式可自由更改。
收起
jQuery自适应图片轮播代码_自适应图片切换代码
2019-11-16 16:33:58
jQuery自适应图片轮播代码_自适应图片切换代码
收起
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
2019-11-17 12:09:03
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
收起
Jquery 幻灯片
Unity图片切换轮播功能
2018-12-06 16:28:26
一个可以在Unity进行图片轮播的demo，只需要给一个texture 2d的图片数组就可以直接用，有多种切换特效
收起
Vue 过渡实现轮播图效果
2020-08-31 00:25:01
本篇文章主要介绍了Vue 过渡实现轮播图效果，Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。有需要的小伙伴可以参考下。
收起
Android轮播图点击图片放大效果的实现方法
2021-01-05 09:07:01
最近项目中需要实现轮播图显示商品图片，当用户点击商品图片的时候，需要图片放大显示，当然用户还能进行多张图片的滑动切换，放大，缩小图片等操作，实现起来相对还是比较简单的，话不多说，咱们是用代码说话的，...
收起
html5仿京东淘宝轮播图片切换代码.rar
2019-07-10 17:40:20
html5 CSS3 仿京东淘宝轮播图片切换特效代码，jquery修正了图片地址，上次其实只是没有把jquery打包在里面，不过有些新手摸不着头绪了，反复说代码有误，这次不会了，请看效果图。图片两侧显示箭头，下边显示两加点...
收起

vue element轮播图实现点击图片切换路由

2021-04-21 14:32:07

element轮播图实现点击图片切换路由确保已经安装了elementui，并且注册好了路由 elementui官网（安装和轮播组件文档都有详细说明，不赘述）开始改造vue组件 html部分 router-link标签@click事件，绑定的...

element轮播图实现点击图片切换路由 
 确保已经安装了elementui，并且注册好了路由
 elementui官网（安装和轮播组件文档都有详细说明，不赘述）
 
 开始改造vue组件
  
html部分 
  router-link标签@click事件，绑定的事件无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加 .native, 事件是不会触发的
  
//html部分
<template>
	<div>
		<el-carousel :interval="4000" type="card" height="200px"  ref="carousel" @click.native="linkTo">
		<!---注意：@click后加.native--->
        	<el-carousel-item v-for="item in imgs" :key="item.url">
          		<img :src="item.url"/>
        	</el-carousel-item>
     	 </el-carousel>
	</div>
</template>
 
JS部分 
  图片显示问题：用require(’ ')，
关于图片引入的格式：
 '…/assets/image/qqgroup.jpg’是绝对路径引入。如果以后图片移动了位置，代码也需要相应修改。
 '@/assets/image/qqgroup.jpg’是动态引入（我自己用有时候会报错有时候又不会，之前报错的时候没注意看错误提示，之后发现了再更新）
  
<script>
export default {
  name: "index",
  data() {
    return {
          imgs: [
          		 {url: require('../assets/image/qqgroup.jpg'), link: '/business/info_attchment_testyz'},
        		 {url: require('@/assets/image/qqgroup.jpg'), link: '/business/info_attchment_testjg'},
        		 //{url: require('图片地址'), link: '路由地址'},
      		]
    	};
  },
  
  methods: {
    linkTo () {  //跳转路由
      let activeIndex = this.$refs.carousel.activeIndex
      this.$router.push(this.imgs[activeIndex].link)
    }
  },
};
</script>

 
CSS部分 
//直接用的elementui提供的默认格式
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

收起

展开全文

vue使用swiper实现中间大两边小的轮播图效果
2020-12-30 01:43:50
项目中使用的vue，刚好有需求要实现轮播图，突出显示当前图片，两边展示其他图片；通过查各种资料，实现了，故在此记录下来下面我们来看下实现步骤：第一步：首先在项目index.html中引入swiper的css文件- swiper...
收起
简单实现css轮播图
2018-07-26 15:18:16
html页面图片实现简单轮播图效果，下载可直接使用，下载可直接使用，下载可直接使用
收起
JavaScript实现切换式轮播图效果
2019-05-25 21:40:59
使用JavaScript实现的切换式轮播图效果。轮播图图片使用自动添加img标签实现，图片个数只需修改图片数组的内容，在数组中添加图片名称即可。
收起
JavaScript
纯js百叶窗效果轮播图插件
2019-12-11 19:38:58
这是一款纯js百叶窗效果轮播图插件。该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图。该轮播图由纯js编写，兼容ie8浏览器。
收起
jQuery库
Android实现ViewPage轮播图效果
2020-08-27 19:08:52
主要为大家详细介绍了Android实现ViewPage轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
收起

使用CSS实现简单的图片切换（轮播图）

万次阅读 多人点赞 2020-03-29 21:56:51

使用CSS实现简单的图片切换（轮播图）预览图如下：一:首先创建基本布局创建一个div容器，里面的ul与ol标签分别对应轮播图片和下方圆点； <!DOCTYPE html> <html lang="en"> <head> <...

使用CSS实现简单的图片切换（轮播图） 
预览图如下：
 

 目录
 使用CSS实现简单的图片切换（轮播图）
一:首先创建基本布局
1：创建一个div容器 ，里面的ul与ol标签分别对应轮播图片和下方圆点；
   
二：添加CSS样式
1：为图片与圆点添加相应样式，使其正常显示；
标题2：为图片和圆点添加动画样式；
  
 


 

 
一:首先创建基本布局 
1：创建一个div容器 ，里面的ul与ol标签分别对应轮播图片和下方圆点； 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>css轮播</title>
</head>

<body>
    <div class="container">
        <ul>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>

</html>
 
二：添加CSS样式 
1：为图片与圆点添加相应样式，使其正常显示； 
*{padding: 0;margin: 0;box-sizing: border-box;}
li{
    list-style: none;
    float: left;
}
ul img{
    width: 960px;
    height: auto;
    
}
.container{
    width: 960px;//容器大小要和图片大小保持一致。
    height: 544px;
    margin: 50px auto 0;
    overflow: hidden;
    position: relative;
    border: 1px solid black;
}
ol{
    position: absolute;
    bottom: 0;
    left: 50%;
    padding: 10px;
    margin-left: -50px;
    z-index: 999;

}
ol li{
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 1px solid red;
    border-radius: 50%;
    margin: 0 10px;
}
 
标题2：为图片和圆点添加动画样式； 


.container ul{
       animation:Yui 3s cubic-bezier(0, 1, 0, 1) 1s infinite ;
       width: 400%;

}
@keyframes Yui{
      0% {
        transform: translateX(0px);
      }
      33% {
        transform: translateX(-960px);
      }
      66% {
        transform: translateX(-1920px);
      }
      100% {
        transform: translateX(0px);
      }
      
}
ol li {
  animation:focus 3s linear infinite ;//时间要和图片保持一致
  }
  ol li:nth-child(1) {
    animation-delay: 0s;
  }
  ol li:nth-child(2) {
    animation-delay: 1s;
  }
  ol li:nth-child(3) {
    animation-delay: 2s;
  }
 
  @keyframes focus {
    0% { 
      background-color: #000;
    }
    20% {
      background-color: #000;
    }
    30% {
      background-color: #fff;
    }
  }
 
转载请注明出处

收起

展开全文

css3 html

vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）
2021-01-19 20:34:50
1.效果图如下 2.vue代码如下 indicator-position=none autoplay=false> (items, key=index> <div style=position: absolute; v-show=item.s
收起
纯css实现轮播图banner自动轮换效果
2020-11-19 11:57:47
话不多说直接上代码
收起
图片切换，轮播图
2015-03-17 15:49:09
图片切换，轮播图，图片切换，轮播图，图片切换，轮播图
收起
纯div+css轮播图片切换图片
2018-11-07 17:54:06
纯DIV+CSS做的三种图片滚动，轮播图片 1.2.3.4图片切换电子相册
收起
基于vue2.0实现简单轮播图
2020-11-27 13:00:46
如图所示，实现的就是一个间隔2.5s自动向左切换下一张的轮播图，同时鼠标移入停止轮播，移出回复轮播；而下方按钮会根据当前图片自动变红且可以手动控制当前图片。思路：整个demo分为轮播图片和控制span两个部分...
收起
js轮播图透明度切换（带上下页和底部圆点切换）
2020-10-19 23:17:01
本篇文章主要介绍了js轮播图透明度切换（带上下页和底部圆点切换）的实例。具有很好的参考价值。下面跟着小编一起来看下吧
收起
漂亮的图片切换折叠效果
2020-06-11 05:21:58
图片左右轮播切换，底下衬托的黑色背景，立体感较强。有些像jquery手风琴特效
收起
JS实现左右无缝轮播图代码
2020-11-25 12:31:06
无缝轮播图： <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: ...
收起
微信小程序轮播图实例：自定义指示点的样式，上下滚动
2021-03-29 21:45:06
轮播图是大部分应用的一个常用的功能，常用于广告投放、产品展示、活动展示等等。漂亮的轮播图效果可以吸引用户的点击，达到推广产品的作用。...查看做轮播图功能的一张图片大小都已经有100+k了 (此图
收起
微信程序
WPF实现手风琴式轮播图切换效果
2020-09-07 17:35:34
主要为大家详细介绍了WPF实现手风琴式轮播图切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
收起
jquery实现简单自动轮播图效果
2020-11-20 07:17:28
本文实例为大家分享了jquery实现简单自动轮播图的具体代码，供大家参考，具体内容如下代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="author...
收起

用js和CSS写图片切换效果（轮播图）

用js和CSS写图片切换效果（轮播图）、

Swiper实现轮播图效果

js实现点击左右按钮轮播图片效果实例

JS 轮播图 图片切换（定时器）

标题JS 轮播图 图片切换（定时器）

javascript实现点击按钮切换轮播图功能

网站前端——图片左右切换（轮播图）

jQuery自适应图片轮播代码_自适应图片切换代码

Jquery图片轮播幻灯片效果实现左右滚动图片切换代码

Unity图片切换轮播功能

Vue 过渡实现轮播图效果

Android轮播图点击图片放大效果的实现方法

html5仿京东淘宝轮播图片切换代码.rar

vue element轮播图实现点击图片切换路由

element轮播图实现点击图片切换路由

vue使用swiper实现中间大两边小的轮播图效果

简单实现css轮播图

JavaScript实现切换式轮播图效果

纯js百叶窗效果轮播图插件

Android实现ViewPage轮播图效果

使用CSS实现简单的图片切换（轮播图）

使用CSS实现简单的图片切换（轮播图）

目录

一:首先创建基本布局

1：创建一个div容器 ，里面的ul与ol标签分别对应轮播图片和下方圆点；

二：添加CSS样式

1：为图片与圆点添加相应样式，使其正常显示；

标题2：为图片和圆点添加动画样式；

vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

纯css实现轮播图banner自动轮换效果

图片切换，轮播图

纯div+css轮播图片切换图片

基于vue2.0实现简单轮播图

js轮播图透明度切换（带上下页和底部圆点切换）

漂亮的图片切换折叠效果

JS实现左右无缝轮播图代码

微信小程序轮播图实例：自定义指示点的样式，上下滚动

WPF实现手风琴式轮播图切换效果

jquery实现简单自动轮播图效果

JS 轮播图图片切换（定时器）

标题JS 轮播图图片切换（定时器）

1：创建一个div容器，里面的ul与ol标签分别对应轮播图片和下方圆点；