精华内容
下载资源
问答
  • JS原生轮播图

    2020-06-19 13:21:45
    哈喽!我的朋友们,最近有一个新项目。...今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: 1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 img{ 6 width: 500px; 7 height: 300px; 8

    哈喽!我的朋友们,最近有一个新项目。所以一直没更新!有没有想我啊!!

    今天咱们来说一下JS原生轮播图!

    话不多说:

    直接来代码吧:下面是CSS部分:

     1 *{
     2                 padding: 0px;
     3                 margin: 0px;
     4             }
     5             img{
     6                 width: 500px;
     7                 height: 300px;
     8             }
     9             li{
    10                 float: left;
    11             }
    12             ul{
    13                 width: 2000px;
    14                 list-style: none;
    15                 position: absolute;
    16             }
    17             div{
    18                 width: 500px;
    19                 height: 300px;
    20                 /*溢出部分隐藏*/
    21                 overflow: hidden;
    22                 margin: 60px auto;
    23                 position: relative;
    24             }

     

    HTML部分!

    		<div>
    			<ul>
    				<li><img src="img/1.jpg" /></li>
    				<li><img src="img/2.jpg"/></li>
    				<li><img src="img/3.jpg"/></li>
    				<li><img src="img/1.jpg" /></li>
    			</ul>
    		</div>
    

      接下来是JS部分:

     1 //1、获取到ul
     2             var ul = document.getElementsByTagName("ul")[0];
     3             var x = 0;
     4             
     5             //id 用来关闭定时器的
     6             var id = setInterval(abc,10);
     7             
     8             function abc(){
     9                 ul.style.left = x-- +"px";
    10                 
    11                 //如果到第三周图片了
    12                 if(x == -1500){
    13                     x = 0;//把ul修改成第一张图片
    14                     ul.style.left = x+"px";
    15                 }
    16                 if(x % 500 == 0){ //第一张图片进来
    17                     clearInterval(id); //关闭定时器
    18                     //开启定时器 隔半秒钟开启定时器
    19                     setTimeout(function(){
    20                         //500毫秒之后开启定时器,继续执行
    21                         id = setInterval(abc,10);
    22                     },500);//setTimeout 延时执行
    23                 }
    24             }

    就是这么简单!你学会了吗??

    展开全文
  • JS原生轮播图插件

    2019-08-11 07:33:39
    JS原生轮播图插件
  • js原生 轮播图

    2019-09-27 16:56:04
    1.先画轮播图片样式 2.再画轮播按钮 3.样式完成,写js代码 4.获取所有节点 <!DOCTYPE html>...轮播图</title> <!-- 1.先画轮播图片样式 2.再画轮播按钮 3.样式完成,写js代码,初始...

    1.先画轮播图片样式

    2.再画轮播按钮

    3.样式完成,写js代码

    4.获取所有节点

    <!DOCTYPE html>
    <html>
    <head>
        <title>轮播图</title>
        <!--
            1.先画轮播图片样式
            2.再画轮播按钮
            3.样式完成,写js代码,初始化index(表示第几张图片在展示)
            4.获取所有节点
            注意:
            1.相对定位和绝对定位
            2.透明度
        -->
        <style type="text/css">
            .wrap{
                width: 800px;
                height: 400px;
                position: relative;
            }
            .list{
                width: 800px;
                height: 400px;
                list-style: none;
                position: relative;
                padding-left: 0px;
            }
            .item{
                position: absolute;
                width: 100%;
                height: 100%;
                color: white;
                font-size:20px;
                opacity: 0;
                transition: all .8s;
                z-index: 2
            }
            /*nth-child()用于选择子元素,参数是从0开始的*/
            .item:nth-child(1){
                background-color: black;
            }
             .item:nth-child(2){
                background-color: red;
            }
             .item:nth-child(3){
                background-color: green;
            }
             .item:nth-child(4){
                background-color: yellow;
            }
             .item:nth-child(5){
                background-color: pink;
            }
            .btn{
                width: 50px;
                height: 100px;
                position: absolute;
                top: 150px;
                z-index: 100;
            }
            #goPre{
                left: 0px;
            }
            #goNext{
                right: 0px;
            }
            .item.active{
                z-index: 10;
            }
            .pointList{
                padding-left: 0px;
                list-style: none;
                position: absolute;
                right: 20px;
                bottom: 20px;
                z-index: 1000;
            }
            .point{
                width: 10px;
                height: 10px;
                background-color: rgba(0,0,0,0.4);
                border-radius: 100%;
                float: left;
                margin-right: 14px;
                border-style: solid;
                border-width: 2px;
                border-color: rgba(255,255,255,0.6);
                 cursor: pointer;
            }
            .point .active{
                 background-color: rgba(255,255,255,0.8);
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <ul class="list">
                <li class="item active">0</li>
                <li class="item">1</li>
                <li class="item">2</li>
                <li class="item">3</li>
                <li class="item">4</li>
            </ul>
            <ul class="pointList">
                <li class="point" data-index='0'></li>
                 <li class="point" data-index='1'></li>
                  <li class="point" data-index='2'></li>
                   <li class="point" data-index='3'></li>
                    <li class="point" data-index='4'></li>
            </ul>
            <button type="button" class="btn" id="goPre"><</button>
            <button type="button" class="btn" id="goNext">></button>

        </div>
      
    </body>
      <script type="text/javascript">
            
            // 获取所有class为item的节点
            var items = document.getElementsByClassName('item');
            // 获取id为goPre的节点
            var goPreBtn = document.getElementById('goPre');
            // 获取id为goNext的节点
            var goNextBtn = document.getElementById('goNext');

            var points = document.getElementsByClassName('point');

            var index = 0; //表示第几张图片在展示 --> 第几张图片有active这个类名
            // 第几个点在展示

            // 清除active
            var clearActive = function(){ 
               for(var i = 0;i < items.length;i++){
                    items[i].className = 'item';
                }  
                for(var i = 0;i < points.length;i++){
                    points[i].className = 'point';
                } 
            }

            // 把想要的加上active,其余的都是item,把想要的留下,不想要的都删掉
            var goIndex = function(){
                clearActive();
                items[index].className = 'item active';
                points[index].className = 'point active';
                
            }

            var goNext = function(){
                
                if(index < 4){
                   index ++;
                }else{
                   index = 0
                }
                 goIndex();
            }

             var goPre = function(){
                        
                        if(index == 0){
                           index = 4;
                        }else{
                          index --;
                        }
                         goIndex();
                    }


            goNextBtn.addEventListener('click',function(){
                goNext();
            });

             goPreBtn.addEventListener('click',function(){
                goPre();
            });

             for(let i= 0; i <points.length;i++){
                 points[i].addEventListener('click',function(){
                var pointIndex = this.getAttribute('data-index');
                index = pointIndex;
                goIndex();
            });
             }
        </script>
    </html>

    展开全文
  • js原生轮播图

    2021-04-23 15:17:55
    需要使用到轮播图,n多年没写前端了,随便找了一个demo改了下,记录一下,以便后续快速的使用 <body> <div id="flash"> <div id="prev"></div> <div id="next"></div> <...

    需要使用到轮播图,n多年没写前端了,随便找了一个demo改了下,记录一下,以便后续快速的使用

    <body>
     <div id="flash">
         <div id="prev"></div>
         <div id="next"></div>
    	 <ul id="play">
    	 	<li style="display: block;"><img src="images/1.jpg" alt="" /></li>
    	 	<li><img src="images/2.jpg" alt="" /></li>
    	 	<li><img src="images/3.jpg" alt="" /></li>
    	 	<li><img src="images/4.jpg" alt="" /></li>
    	 	<li><img src="images/5.jpg" alt="" /></li>
    	 	<li><img src="images/6.jpg" alt="" /></li>
    	 	<li><img src="images/7.jpg" alt="" /></li>
    	 	<li><img src="images/8.jpg" alt="" /></li>
    	 </ul>
    	 <ul id="button">
    	 	<li><div style="background: #A10000;"></div></li>
    	 	<li><div></div></li>
    	 	<li><div></div></li>
    	 	<li><div></div></li>
    	 	<li><div></div></li>
    	 	<li><div></div></li>
    	 	<li><div></div></li>
    	 	<li><div></div></li>
    	 </ul>
     </div>
    </body>
    
    *{padding: 0px;margin: 0px;}
    #flash{width:1200px;height: 535px;margin: 50px auto;position: relative;}
    #flash #play{width:1200px;height: 535px;list-style: none;position:absolute;top:0px;left:0px;}
    #flash #play li{display: none;position:absolute;top:0px;left:0px;}
    #flash #play li img{float: left;}
    #button{position: absolute;bottom:20px;left:470px;list-style: none;}
    #button li{margin-left: 10px;float: left;}
    #button li div{width:12px;height: 12px;background:#DDDDDD;border-radius: 6px;cursor: pointer;}
    #prev{width:40px;height:63px;background:url(images/beijing.png) 0px 0px;position: absolute;top:205px;left:10px;z-index: 1000;}
    #next{width:40px;height:63px;background:url(images/beijing.png) -40px 0px;position: absolute;top:205px;right:10px;z-index: 1000;}
    #prev:hover{background:url(images/beijing.png) 0px -62px;}
    #next:hover{background:url(images/beijing.png) -40px -62px;}
    
    window.onload=function()
    {
    		 var oPlay=document.getElementById('play');
    		 var aLi=oPlay.getElementsByTagName('li');
    		 var oButton=document.getElementById('button');
    		 var aDiv=oButton.getElementsByTagName('div');
    		 var oPrev=document.getElementById('prev');
    		 var oNext=document.getElementById('next');
    		 var oFlash=document.getElementById('flash');
    		 var now=0;
    		 var timer2=null;
    		 for(var i=0; i<aDiv.length; i++) {
    		 	aDiv[i].index=i;
    		 	aDiv[i].onmouseover=function(){
    		 		if(now==this.index) return;
    		 		now=this.index;
    		 		tab();
    		 	}
    		 }
    		 oPrev.onclick=function(){
    		 	now--;
    		 	if(now==-1){
    		 		now=aDiv.length-1;
    		 	}
    		 	tab();
    		 }
    		 oNext.onclick=function(){
    		 	now++;
    		 	if(now==aDiv.length){
    		 		now=0;
    		 	}
    		 	tab();
    		 }
    		 oFlash.onmouseover=function()
    		{
    		    clearInterval(timer2);
    		}
    		 oFlash.onmouseout=function()
    		{
    			timer2=setInterval(oNext.onclick,4000);
    		}
    		 timer2=setInterval(oNext.onclick,5000);
    		 function tab(){
    		 	for(var i=0; i<aLi.length; i++){
    		 		aLi[i].style.display='none';
    		 	}
    		 	for(var i=0; i<aDiv.length; i++) {
    		 		aDiv[i].style.background="#DDDDDD";
    		 	}
    		 	aDiv[now].style.background='#A10000';
    		 	aLi[now].style.display='block';
    		 	aLi[now].style.opacity=0;
    		 	aLi[now].style.filter="alpha(opacity=0)";
    		 	jianbian(aLi[now]);
    		 }
    		function jianbian(obj){
    			var alpha=0;
    			clearInterval(timer);
    			var timer=setInterval(function(){
    				alpha++;
    				obj.style.opacity=alpha/100;
    				obj.style.filter="alpha(opacity="+alpha+")";
    				if(alpha==100) {
    					clearInterval(timer);
    				}
    			},10);
    		}
    }
    

    效果图:

    在这里插入图片描述

    展开全文
  • Js原生轮播图

    2019-07-27 15:38:35
    轮播图 *{ margin: 0; padding:0; } #outer{ margin: 50px auto; width: 500px; height: 340px; background-color: pink; padding: 10px; position: relative; overflow: hidden; } #imgList{ ...
    <!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 type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        #outer{
            margin: 50px auto;
            width: 500px;
            height: 340px;
            background-color: pink;
            padding: 10px;
            position: relative;
            overflow: hidden;
        }
        #imgList{
            list-style: none; /* 去掉列表黑点 */
            position: absolute;
            left: 0;
        }
        #imgList li{
            float: left; /* 左右排列 */
            margin: 0px 10px;
        }
        #nav{
            position: absolute;
            bottom: 20px;
            /* (520 - 25*5)/2 
            设置a居中
            */
    
           /*  left: 198px; */
        }
        #nav a{
            float: left;
            height: 15px;
            width: 15px;
            border-radius: 50%;
            background-color: lightblue;
            margin: 0 10px;
            opacity: 0.5;
            filter: alpha(opacity = 50);
        }
        </style>
    </head>
    <body>
        <div id="outer">
            <ul id="imgList">
                <li>
                    <img src="./fengjing1.jpg">
                </li>
                <li>
                    <img src="./fengjing2.jpg">
                </li>
                <li>
                    <img src="./fengjing3.jpg">
                </li>
                <li>
                    <img src="./fengjing4.jpg">
                </li>
                <li>
                    <img src="./fengjing5.jpg">
                </li>
                <li>
                    <img src="./fengjing1.jpg">
                </li>
            </ul>
            <div id="nav">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
            </div>
        </div>
    </body>
    <script>
    var imgList = document.getElementById('imgList');
    var lis = document.getElementsByTagName('li');
    imgList.style.width = lis.length * 520 + "px";//判断设置轮播图宽度
    
    var nav = document.getElementById('nav');
    var outer = document.getElementById('outer');
    nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px";//设置点击切换按钮居中
    
    var alis = document.getElementsByTagName('a');
    var index = 0;
    alis[index].style.backgroundColor = 'black';//设置默认选中的样式
    
    for(var i = 0;i<alis.length;i++){
        alis[i].num = i;//存储每个a的下标
        alis[i].onclick = function(){
            clearInterval(timer);
           // alert(this.num);
           index = this.num;
           setA(index)//设置a标签样式
           move(imgList,'left',-520*index,20,function(){//设置点击切换动画
            autoplay();
           });
        }
    }
    var index = 0;
    var timer;
    autoplay();
    function autoplay(){//轮播图自播放
     timer = setInterval(() => {
        index++;
        index %= lis.length;
        move(imgList,'left',-520*index,30,function(){//设置点击切换动画
            setA(index);
    });
    }, 2000);
    }
    function setA(){
        if(index == lis.length-1){
            index = 0;
            imgList.style.left = 0 + "px";
        }
        for(var i = 0;i<alis.length;i++){
                alis[i].style.backgroundColor = "";//内联样式背景取消,回复默认style标签里的样式。
        }
        alis[index].style.backgroundColor = "black";
        }
        //
     function move(obj,attr,target,speed,callback){
            clearInterval(obj.timer);//关闭上一个定时器,防止点击多次创建多个
            var current = parseInt(getStyle(obj,attr));//当前位置
            if(current > target){ //判断移动方向
                speed = -speed;
            }
            //alert(olddis);
            ///设置定时器
            obj.timer = setInterval(() => {
                var olddis = parseInt(getStyle(obj,attr));
                var newdis = olddis + speed;//
                if((newdis < target && speed < 0) || (newdis > target && speed > 0)) //到边界
                {
                    newdis = target;
                }
                obj.style[attr] = newdis + "px";//设置div的新的左边距
                if(newdis === target){
                    clearInterval(obj.timer);
                    callback && callback();
                }
              
                
            }, 30);
         }
         function getStyle(obj,name){
             return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
        }
    </script>
    </html>

     

    展开全文
  • 下面小编就为大家带来一篇JS原生轮播图的简单实现(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • js原生轮播图.zip

    2020-05-21 21:08:15
    原生JavaScript写的一套轮播图代码,包含焦点轮播,自动轮播,无缝轮播。下载后替换图片即可使用
  • js原生轮播图面向对象编程js原生实现轮播图效果1.先看效果图2.需要实现的功能:3.html结构4.功能实现4.1 创建对象4.2动画效果由translateX实现4.3根据轮播图片个数生成数字按钮节点4.4轮播图数字按钮点击切换状态4.5...
  • JS原生轮播图实现

    千次阅读 2017-10-19 10:38:10
    作为一个PHP全栈攻城狮,不仅要会后端PHP和数据库,还要会前端JS。今天源码时代PHP培训学科老师要和大家分享一下JS原生编写轮播图的插件。
  • DaZeng:JS原生轮播图(带原理、思考步骤、详情)

    千次阅读 多人点赞 2019-10-30 16:30:13
    首先说一下js原生轮播图的感悟吧 怎么说呢?做轮播图的时候路途太坎坷先是看各种博文领悟学习别人的代码,但感觉不是很完整条理也没有那么清晰,又去某站学习了一下函数封装轮播无缝等的视频才感觉没有那么难,零零...
  • javaScript原生实现轮播图function autoplay(){photo_index++; //全局变量保存下标if(photo_index>=photo_array.length) photo_index=0;//photp_array数组保存了全部图片的dom对象for(let i=0;iphoto_array[i]....
  • JS原生轮播图代码

    2017-03-22 00:49:53
    布局一个这样的轮播图 难点在于图4与图1怎么实现无缝轮播,巧妙的是把图1插入图4后面 12341...代码如下 html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> *{ margin:0; ...
  • 原生js制作的轮播图,不需要引入插件。 实现功能: 1)定时器效果,隔一秒转下一张图 2)鼠标移上去停止轮播,离开则继续 3)轮播图02,03采用了css3的3d效果 4)可点击左右箭头进行切图 5)小圆点切图功能懒得做了..
  • 轮播图设计思路,控制ul在一定时间内,向右移动一个 li 宽度的距离,从而展示相应 li 的图片内容,当移动到最后一个li时,迅速让其坐标归0,从新开始循环。 添加向左或向右按钮,绑定点击按钮与ul的关系,当点击向...
  • 小白之js原生轮播图

    2017-09-12 09:58:00
    js:(banner.js) var scroll = document.getElementById("scroll"); var scrollli = document.getElementById("scroll").getElementsByTagName("li"); var btns = document.getElementById("btns")....
  • js原生轮播图,支持移动端

    千次阅读 2017-02-15 20:11:57
    直接上代码,自行复制粘贴,本人是新手,欢迎指正。<!DOCTYPE HTML> 轮播图 , initial-scale=1.0, maximum-scale=1.0, user-scal
  • js: var index = 1; var poins = document.querySelectorAll('.poin'); init(); var timer; //自动切换函数 function play() { timer = setInterval(function () { index = index == 3 ? 1 : index + 1;//...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,994
精华内容 797
关键字:

js原生轮播图