精华内容
下载资源
问答
  • 用js和CSS写图片切换效果(轮播图

    千次阅读 多人点赞 2019-01-18 13:56:07
    用js和CSS写图片切换效果(轮播图)、 ** 学习前提** 了解CSS伪类元素,css3过度效果 对js拥有基础的了解。 清楚图片切换原理。 <!doctype html> <html lang="...

    用js和CSS写图片切换效果(轮播图)、

    ** 学习前提**

    1. 了解CSS伪类元素,css3过度效果
    2. 对js拥有基础的了解。
    3. 清楚图片切换原理。
    <!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实现点击左右按钮轮播图片效果的方法,涉及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实现点击按钮切换轮播图功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 可以在网页实现图片左右切换,即轮播图。使用bootstraps框架,不需要css、js文件。导入即可使用。图片的数量和样式可自由更改。
  • jQuery自适应图片轮播代码_自适应图片切换代码
  • Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
  • 一个可以在Unity进行图片轮播的demo,只需要给一个texture 2d的图片数组就可以直接用,有多种切换特效
  • 本篇文章主要介绍了Vue 过渡实现轮播图效果,Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果。有需要的小伙伴可以参考下。
  • 最近项目中需要实现轮播图显示商品图片,当用户点击商品图片的时候,需要图片放大显示,当然用户还能进行多张图片的滑动切换,放大,缩小图片等操作,实现起来相对还是比较简单的,话不多说,咱们是用代码说话的,...
  • html5 CSS3 仿京东淘宝轮播图片切换特效代码,jquery修正了图片地址,上次其实只是没有把jquery打包在里面,不过有些新手摸不着头绪了,反复说代码有误,这次不会了,请看效果。图片 两侧显示箭头,下边显示两加点...
  • element轮播图实现点击图片切换路由 确保已经安装了elementui,并且注册好了路由 elementui官网(安装和轮播组件文档都有详细说明,不赘述) 开始改造vue组件 html部分 router-link标签@click事件,绑定的...

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

    1. 确保已经安装了elementui,并且注册好了路由
      elementui官网(安装和轮播组件文档都有详细说明,不赘述)

    2. 开始改造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,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片;通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swiper的css文件- swiper...
  • 简单实现css轮播图

    2018-07-26 15:18:16
    html页面图片实现简单轮播图效果,下载可直接使用,下载可直接使用,下载可直接使用
  • 使用JavaScript实现的切换式轮播图效果。轮播图图片使用自动添加img标签实现,图片个数只需修改图片数组的内容,在数组中添加图片名称即可。
  • 这是一款纯js百叶窗效果轮播图插件。该js轮播图图片切换时的效果类似于多张图片展开合成一张完整的大图。该轮播图由纯js编写,兼容ie8浏览器。
  • 主要为大家详细介绍了Android实现ViewPage轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 使用CSS实现简单的图片切换轮播图

    万次阅读 多人点赞 2020-03-29 21:56:51
    使用CSS实现简单的图片切换轮播图) 预览图如下: 一:首先创建基本布局 创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点; <!DOCTYPE html> <html lang="en"> <head> <...

    使用CSS实现简单的图片切换(轮播图)

    预览图如下:


    在这里插入图片描述

    一:首先创建基本布局

    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;
        }
      }
    

    转载请注明出处

    展开全文
  • 1.效果如下 2.vue代码如下 indicator-position=none autoplay=false> (items, key=index> <div style=position: absolute; v-show=item.s
  • 话不多说 直接上代码
  • 图片切换轮播图

    2015-03-17 15:49:09
    图片切换轮播图图片切换轮播图图片切换轮播图
  • 纯DIV+CSS做的三种图片滚动,轮播图片 1.2.3.4图片切换 电子相册
  • 如图所示,实现的就是一个间隔2.5s自动向左切换下一张的轮播图,同时鼠标移入停止轮播,移出回复轮播; 而下方按钮会根据当前图片自动变红且可以手动控制当前图片。 思路: 整个demo分为轮播图片和控制span两个部分...
  • 本篇文章主要介绍了js轮播图透明度切换(带上下页和底部圆点切换)的实例。具有很好的参考价值。下面跟着小编一起来看下吧
  • 图片左右轮播切换,底下衬托的黑色背景,立体感较强。有些像jquery手风琴特效
  • 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: ...
  • 轮播图是大部分应用的一个常用的功能,常用于广告投放、产品展示、活动展示等等。漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用。...查看做轮播图功能的一张图片大小都已经有100+k了  (此图
  • 主要为大家详细介绍了WPF实现手风琴式轮播图切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例为大家分享了jquery实现简单自动轮播图的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="author...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 401,832
精华内容 160,732
关键字:

轮播图