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

     简单吧!

     

      

  • 相关阅读:
    LRT最大似然比检验
    EPNP理论分析
    奇异值SVD分解
    矩阵求导
    static_cast和dynamic_cast用法
    Django 使用 Celery 实现异步任务
    python爬虫实战一:分析豆瓣中最新电影的影评
    scrapy模拟登陆知乎--抓取热点话题
    一个小时搭建一个全栈Web应用框架(上)
    一个小时搭建一个全栈 Web 应用框架(下)——美化与功能
  • 原文地址:https://www.cnblogs.com/LWJ-booke/p/7085455.html
Copyright © 2011-2022 走看看