zoukankan      html  css  js  c++  java
  • 又爱又恨的轮播图来了(原生JS方法)

    HTML代码:

    <div id="caroul">
                <div id="left">向左</div>
                <ul id="ul">
                    <li><img src="img/campIcon_01.jpg" alt="" /></li>
                    <li><img src="img/campIcon_02.jpg" alt="" /></li>
                    <li><img src="img/campIcon_03.jpg" alt="" /></li>
                    <li><img src="img/campIcon_04.jpg" alt="" /></li>
                </ul>
                <div id="right">向右</div>
            </div>

    CSS代码:

    <style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    				list-style: none;
    			}
    			
    			#caroul {
    				position: relative;
    				 790px;
    				height: 340px;
    				font-size: 0;
    				/*overflow: hidden;*/
    			}
    			
    			ul {
    				/*display: none;*/
    				 999999px;
    				height: 340px;
    				position: relative;
    				/*transition: 0.2s linear;*/
    			}
    			
    			li {
    				display: inline-block;
    				 790px;
    				height: 340px;
    			}
    			
    			img {
    				 790px;
    				height: 340px;
    			}
    			
    			#left,
    			#right {
    				position: absolute;
    				 150px;
    				height: 340px;
    				background:rgba(0,0,0,.2);
    				font-size: 30px;
    				text-align: center;
    				line-height: 340px;
    				top: 0;
    				z-index: 999;
    			}
    			
    			#left {
    				left: 0;
    			}
    			
    			#right {
    				right: 0;
    			}
    		</style>
    

    效果图:

    公共的JS变量:

                                    var left = document.getElementById('left');
    				var right = document.getElementById('right');
    
    				var ul = document.getElementById('ul');
    				var li = document.querySelectorAll('li');
    				var lis = li.length;
    				var cloneLI = li[0].cloneNode(true);//复制第一张
    				var clonelastLI = li[lis - 1].cloneNode(true);//复制最后一张
    				ul.appendChild(cloneLI);//加载末尾
    				ul.insertBefore(clonelastLI, li[0]);//加载第一张之前
    				var width = li[0].offsetWidth;//获取ul宽度
    				ul.style.transform = 'translateX(-' + width + 'px)';//让第一张显示,因为前面还有一张			
    
    				//当前轮播的索引
    				var i = 1;
    

    点击向右:

    function goRight() {
    //					btn = false;	
    					i++;//每一张的宽度 * 索引									
    					ul.style.transform = 'translateX(-' + (i * width) + 'px)';//每一次走i * width的距离
    					ul.style.transition = 'all .2s linear';//添加动画						
    					//监听transition结束的时候
    					ul.addEventListener("transitionend", function() {
    //						btn = true;
    						if(i == li.length+1) {
    							//到达轮播的最后一张(克隆第一张的那个)
    							//重置动画时间,瞬间完成
    							ul.style.transition = 'none';
    							i = 1;
    							//回到起始位置
    							ul.style.transform = 'translateX(-' + i* width + 'px)';
    						}
    
    					})
    				}
    				right.addEventListener('click',goRight);
    

    点击向左:

    function goLeft() {
    //					btn = false;	
    					i--;//每一张的宽度 * 索引									
    					ul.style.transform = 'translateX(-' + (i * width) + 'px)';//走到第一张的前一张
    					ul.style.transition = 'all .2s linear';//添加动画						
    					//监听transition结束的时候
    					ul.addEventListener("transitionend", function() {
    //						btn = true;
    						if(i == 0) {
    							//重置动画时间,瞬间完成
    							ul.style.transition = 'none';
    							i = li.length;
    							ul.style.transform = 'translateX(-' + i* width + 'px)';
    						}
    
    					})
    				}
    				left.addEventListener('click',goLeft);
    

     简单吧!

     

      

  • 相关阅读:
    swoole 安装方法 使用即时聊天
    git的介绍以及简单应用
    curl的应用
    linux下监听和同步代码配置
    mac skim 修改背景色
    php 编译安装的一个 configure 配置
    mac mysql error You must reset your password using ALTER USER statement before executing this statement.
    yii2 控制器里 action 大小写组合造成的路由问题
    warning : json_decode(): option JSON_BIGINT_AS_STRING not implemented in xxx
    redis 自启动脚本
  • 原文地址:https://www.cnblogs.com/LWJ-booke/p/7085455.html
Copyright © 2011-2022 走看看