精华内容
下载资源
问答
  • js轮播图代码

    千次阅读 2019-07-05 21:38:08
    这个轮播图代码是在vue的脚手架里写的,把它拆解起来,写在html原理一样,基本功能实现了,唯一美中不足的就是轮播图一开始不是自动播放的,需要鼠标在图片上划过一次才能自动播放,如果用原生js代码写的话,...

    js轮播图代码

    在这里插入图片描述
    因为平时用vue,写代码习惯了,这个轮播图的代码是在vue的脚手架里写的,把它拆解起来,写在html原理一样,基本功能实现了,唯一美中不足的就是轮播图一开始不是自动播放的,需要鼠标在图片上划过一次才能自动播放,如果用原生js代码写的话,用windoes.onload和init,建立定时器,然后清除等操作可以实现自动播放,和鼠标放在上面后停止播放功能,遇到的问题就是,vue加载页面自动开始触发的定时器写在mounted中,但是将定时器销毁,只能写在钩子函数befdestroy和destroy中才能销毁(我感觉是)中间需要鼠标放在图片上停止定时器实现不了,对vue的生命周期函数理解的还是不够,以后还得多多练习。
    代码

    <template>
      <div>
        <div class='container' @mouseover = 'onStyle()' @mouseout="outStyle()">
            <div class="fade pics">
                <div class='number'>1/3</div>
                <img src="../assets/1.jpg" style="height:100%; width:100%;">
                <a href='#' class='text'>我是第1张照片</a>
            </div>
            <div class="fade pics">
                <div class='number'>2/3</div>
                <img src="../assets/2.jpg" style="width:100%;">
                <a href='#' class='text'>我是第2张照片</a>
            </div>
            <div class="fade pics">
                <div class='number'>3/3</div>
                <img src="../assets/3.jpg" style="width:100%;">
                <a href='#' class='text'>我是第3张照片</a>
            </div>
            <a class='pre' @click="showpic(-1)">❮</a>
            <a class='next' @click="showpic(1)">❯</a>
            <div class="dots">
               <span class='dot' @click="nowshowpic(1)"></span>
               <span class='dot' @click="nowshowpic(2)"></span>
               <span class='dot' @click="nowshowpic(3)"></span>
            </div>
         </div>
    </div>
    </template>
    <script>
    export default {
        name:"lunbopluse",
        data(){
            return{
                picsIndex:1,
                timer:""
            }
        },
        methods: {
        onStyle(){
           clearInterval(this.timer);
           document.getElementsByClassName('text').style.left = '40%';
           
         },
        outStyle(){
          this.timer =  setInterval(() => {this.showpic(1);},2000);
        },
        nowshowpic(n){
          this.pic(this.picsIndex = n)
        },
        showpic(n){
          this.nowshowpic(this.picsIndex + n)
        },
        pic(){
            let pics = document.getElementsByClassName('pics');
            let dots = document.getElementsByClassName('dot');
            if(this.picsIndex > pics.length){
                this.picsIndex = 1;
            };
            if(this.picsIndex < 1){
                this.picsIndex = pics.length;
            };
            for(let i=0;i<pics.length;i++){
                pics[i].style.display = "none"; 
            };
            for(let i=0;i<dots.length;i++){
                dots[i].className = dots[i].className.replace("active","");//这个代码的replace
            };
                pics[this.picsIndex - 1].style.display = "block";
                dots[this.picsIndex - 1].className += " active";//必须和这个一块用才行
            }
        },
        mounted(){
            this.nowshowpic(1);
        },
        beforedestroyed(){
            clearInterval(this.timer);
        }
    };
    </script>
    <style scoped>
    * {box-sizing:border-box}
    body {font-family: Verdana,sans-serif;}
     .container{
         position: relative;
         height: 242px;
         width: 680px;
         margin: 0 auto;
     }
     .pics{
        position: absolute;
        display: none;
     }
     img:hover{  
            transform: scale(1.2);
             }
     .number{
        position:absolute;
        top: 10px;
        left: 10px;
        margin-left: 10px;
        margin-top: 10px;  
        color: white;     
     }
     .text{
         position:absolute;
         bottom: 10px;
         left: 20%;
         font-size: 30px;
         text-decoration:none;
     }
     .pre, .next{
         cursor: url;
         position:absolute;
         font-size: 50px;
         color:red;
         z-index:10;
         transition: color 1s;
     }
     .pre{
         bottom: 40%;
         left: 20px;
     }
     .next {
        bottom: 40%;
        right: 20px;
     }
    .next:hover, .pre:hover{
          color: orange;
    }
     .dots{
         position:absolute;
         bottom: 10px;
         left: 10px;
     }
     .dot{
        cursor:pointer;
        height: 13px;
        width: 13px;
        margin: 0 2px;
        background-color: blue;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 1s;
     }
     .active, .dot:hover{
         background-color:red;
        
     }
     .fade {
    			  animation-name: fade;
    			  animation-duration: 1.5s;
    			}
     @keyframes fade {
    			  from {opacity: .4} 
    			  to {opacity: 1}
    			}
    </style>
    
    

    更多前端资料

    请微信关注公众号:前端从入门到SP
    微信扫描在这里插入图片描述

    展开全文
  • 本文给大家介绍JavaScript实现轮播图效果的,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的...

    本文给大家介绍JavaScript实现轮播图效果的,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

    学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了。

    着是通过获取图片偏移量实现的。也实现了无缝切换。还有一点问题就是没有加上图片切换的时候的延迟了,哈哈

    html:

    js:window.onload = function(){

    //获取元素

    var container = document.getElementById('container');

    var list = this.document.getElementById('list');

    var buttons = document.getElementById('buttons').getElementsByTagName('span');

    var prev = document.getElementById('prev');

    var next = document.getElementById('next');

    var index = 1;//默认第一个小圆点亮

    //小圆点的点亮

    function showButton() {

    //遍历小圆点的个数,当触发onclick事件后,className为‘on’的变为‘’。

    for(var i = 0;i < buttons.length; i++){

    if(buttons[i].className == 'on'){

    buttons[i].className = '';

    break;

    }

    }

    buttons[index - 1].className = 'on'; //原始第一个小圆点点亮,onclick事件触发后,index+1

    }

    function animate (offset) {

    //获取从第一张图片开始发生的偏移量

    var newLift = parseInt(list.style.left) + offset;

    list.style.left = newLift + 'px';

    if(newLift > -600){

    //如果偏移量的位置大于-600的时候,图片跳转到第五张图片

    list.style.left = -3000 + 'px';

    }

    if(newLift < -3000){

    //如果偏移量的位置大于-3000的时候,图片跳转到第一张图片

    list.style.left = -600 + 'px';

    }

    }

    next.onclick = function () {

    //如果button的index为5的时候,再点击next按钮会返回 1;

    if(index == 5){

    index = 1;

    }else{

    index += 1;

    }

    showButton();

    animate(-600);

    }

    prev.onclick = function () {

    if(index == 1){

    index = 5;

    }else{

    index -= 1;

    }

    showButton();

    animate(600);

    }

    }

    总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程!

    相关推荐:

    展开全文
  • JavaScript轮播图代码

    2020-08-20 11:45:57
    JavaScript轮播图代码 <html> <head> <meta charset="utf-8"> <title>轮播图</title> </head> <body> <img src="img/lb1.jpg" id="imgs"/> </body...

    JavaScript轮播图代码

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>轮播图</title>
    	</head>
    	<body>
    		<img src="img/lb1.jpg" id="imgs"/>
    		
    	</body>
    	<script type="text/javascript" id="imgs">
    		
    		var i = 1;
    		function changeimg(){
    			//获取img标签
    			var img = document.getElementsByTagName("img")[0];
    			img.src= "img/lb"+i+".jpg";
    			if(i<5){
    				i++;
    			}else{
    				i=1;
    			}
    
    		}
    		
    		window.setInterval("changeimg()",2000);
    	</script>
    </html>
    
    

    注意图片的命名和函数体中图片变化的规则。
    window.setInterval(“changeimg()”,2000);中的2000,是指每2000毫秒更换一次。

    展开全文
  • 这篇文章主要为大家详细介绍了js图片轮播手动切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示、推荐商品之类的栏目。...

    这篇文章主要为大家详细介绍了js图片轮播手动切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示、推荐商品之类的栏目。它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果。

    不需要调用jquery,初始化简单,使用非常的简单,便利。

    实例效果:

    9fa1f0c4eb7d0fb9b2d96654bba7e055.png

    js代码:

    var scrollPhoto = new ScrollPicleft();

    scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID""

    scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID

    scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID

    scrollPhoto.frameWidth = 450;//显示框宽度

    scrollPhoto.pageWidth = 150; //翻页宽度

    scrollPhoto.speed = 10; //移动速度(单位毫秒,越小越快)

    scrollPhoto.space = 10; //每次移动像素(单位px,越大越快)

    scrollPhoto.autoPlay = false; //自动播放

    scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒)

    scrollPhoto.initialize(); //初始化

    本文实例讲述了js图片轮播手动切换效果。分享给大家供大家参考。具体如下:

    这是一款基于js图片轮播手动切换效果代码,实现过程很简单。

    为大家分享的js图片轮播手动切换效果代码如下

    js图片轮播手动切换效果

    html,body,ul,li{margin:0; padding:0;}

    ul,li{ list-style:none;}

    .dd_main{ width:520px;}

    .zl_left { width:35px; float:left; text-align:left; padding-top:60px}

    .zl_right { width:35px; float:right; text-align:right; padding-top:60px}

    .zl_content { width:450px; height:153px; float:left; overflow:hidden;}

    .zl_content ul li { width:130px; padding:0 10px; text-align:center; float:left;}

    .welcome{ position:fixed; width:100%; text-align:center; bottom:30px;}

    .welcome a{ color:#0350B8;}

    zl_tb1.jpg

    • zl_tp.jpg
    • zl_tp.jpg
    • zl_tp.jpg
    • zl_tp.jpg
    • zl_tp.jpg
    • zl_tp.jpg
    • zl_tp.jpg

    zl_tb2.jpg

    var scrollPhoto = new ScrollPicleft();

    scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID""

    scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID

    scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID

    scrollPhoto.frameWidth = 450;//显示框宽度

    scrollPhoto.pageWidth = 150; //翻页宽度

    scrollPhoto.speed = 10; //移动速度(单位毫秒,越小越快)

    scrollPhoto.space = 10; //每次移动像素(单位px,越大越快)

    scrollPhoto.autoPlay = false; //自动播放

    scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒)

    scrollPhoto.initialize(); //初始化

    展开全文
  • js轮播图代码分享

    2020-10-21 22:50:17
    主要为大家详细介绍了js轮播图代码代码简洁,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • JS实现焦点图轮播效果效果:(不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦)代码如下,复制即可使用:JS实现焦点图轮播效果* {margin: 0;padding: 0;text-decoration: none;}body {pad.....
  • 2.先是HTML中的内容,最外层是轮播图整个的容器“slideShowContainer”,里边是用来装图片的“picUl”和用来显示小方框的“dotUl”,以及用来装标题的“titleDiv”。1234党政机关公务用车有了统一标识“洛阳创新”...
  • 简单的JS轮播图代码

    2020-10-21 22:35:25
    主要介绍了简单的JS轮播图实现方法,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • JavaScript 马赛克效果的JS图片切换代码.rar
  • 一般用来设置网站图片自动轮播一般用来设置网站图片自动轮播
  • 原生js图片轮播切换代码是一款带标题和索引左右按钮控制图片滚动轮播效果。
  • js图片切换代码

    2013-11-13 17:00:42
    动态js代码 可以让新手们学习一下。
  • 马赛克效果的JS图片切换代码.rar马赛克效果的JS图片切换代码.rar马赛克效果的JS图片切换代码.rar马赛克效果的JS图片切换代码.rar马赛克效果的JS图片切换代码.rar马赛克效果的JS图片切换代码.rar
  • js弧形展示图片轮播切换代码是一款带左右箭头按钮的网站焦点代码。
  • 旅游banner特效
  • 原生js轮播图自动切换代码是一款可以自动播放,支持左右切换,支持右下角点击切换,鼠标移动到上面去,自动停止播放,移除后自动开始轮播。
  • js弧形展示图片轮播切换代码是一款带左右箭头按钮的网站焦点代码。
  • 内容索引:脚本资源,Ajax/JavaScript,图片切换 腾讯QQ大秦网banner图片切换效果的JS代码,来自JavaScript妙味客堂。运用了圆形按钮风格,显示出这款图片切换的新颖之处,个性十足,增添几分灵动。需要注意的是,这款...
  • 原生js简约风格轮播图切换代码是一款带左右箭头,数字索引按钮的网站焦点图代码。
  • 原生js制作的焦点图片自动轮播切换代码,带文字标题和索引按钮、箭头按钮控制图片左右滚动轮播
  • 在前端程序开发中,经常会实现js轮播图的效果,怎么实现的呢?下面小编给大家分享基于基于JavaScript实现轮播图代码 ,非常不错,感兴趣的朋友可以参考下
  • 主要介绍了Js图片点击切换轮播实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 分享一款简单的js百叶窗图片轮播切换代码,索引按钮控制多张图片百叶窗过渡效果进行切换。
  • jQuery游戏图片手风琴切换代码 响应式图片文字横幅布局代码 swiper新闻大滚动组合特效 swiper图文标题滚动轮播特效 js自适应屏幕图片瀑布流代码 js随机照片墙布局特效 ...
  • ft-carousel.js图片无缝轮播切换代码是一款结合jQuery实现的焦点无缝轮播插件。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,190
精华内容 37,676
关键字:

js轮播图代码