• jquery轮播图


    咱们今天还是轮播图,今天说jquery的轮播图!

    首先,要有个插件:

    请无视Zepto插件,他没起到任何作用!

    就是这两个啦!

    然后就是代码!

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    	<title></title>
    	<!--引入插件-->
    	<script src="../上月插件/jquery-3.1.1.min.js"></script>
    	<script src="../课件/课件/zepto.js"></script>
    	<!--CSS样式-->
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		img{
    			 400px;
    			height: 230px;
    		}
    		ul{	
    			/*计算全部图片的宽度*/
    			1600px;
    			height: 230px;
    			list-style: none;
    			/*定位*/
    			position: absolute;
    
    		}
    		div{
    			 400px;
    			height: 230px;
    			overflow: hidden;
    			/*定位*/
    			position: relative;
    		}
    		li{	
    			/*单独图片宽度*/
    			400px;
    			float: left;
    		}
    	</style>
    </head>
    <body>
    <div>
    	<ul>
    		<!--图片-->
    		<li><img src="../img/2d.jpg"/></li>
    		<li><img src="../img/2d.jpg"/></li>
    		<li><img src="../img/2d.jpg"/></li>
    		<li><img src="../img/2d.jpg"/></li>
    	</ul>
    </div>
    <script type="text/javascript">
    		var x = 0,TimerId;
    		function strTimer(){
    			TimerId = setInterval(function(){
    				//判断,如果是第三张图片的时候,那么就变成第一张图片,实现循环的效果
    				if(x == -1200){
    					x = 0;
    					$("ul :first").css("left",0 + "px");
    				}
    				if(x % 400 == 0){
    					stop(1);
    				}				
    				$("ul:first").css("left",x-- + "px");
    			},10);
    		}
    			function stop(n){
    				if(n == 1){
    					clearInterval(TimerId);
    					setTimeout(strTimer,500);
    				}else{
    					clearInterval(TimerId);
    				}
    			}
    			
    		strTimer();
    		(zepot);
    </script>
    </body>
    </html>
    

      就是这样,你学会了吗??

  • 相关阅读:
    SpringIOC框架简单实现(注解实现)
    Spring前瞻----Java反射机制
    SpringMVC_前置知识
    SpringAOP_构造注入实现
    SpringAOP_设置注入实现
    SpringIOC-设置注入实现
    IDEA一些常用快捷键
    第一章计算机网络概述
    第二大章--数据链路层思维导图
    第一大章--1.2标准化工作
  • 原文地址:https://www.cnblogs.com/yang-ting/p/7078884.html
Copyright © 2020-2023  润新知