图片轮播无缝接

最新推荐文章于 2023-02-20 15:21:24 发布

weixin_30908707

最新推荐文章于 2023-02-20 15:21:24 发布

阅读量47

点赞数

原文链接：http://www.cnblogs.com/binmengxue/p/6113878.html

版权

第一种方法：图片一直向左滑动，无缝接

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        *{  
            padding: 0;  
            margin: 0;  
        }  
        ul li{list-style-type: none}  
        #banner{  
            width:400px;  
            height:400px;  
            overflow: hidden;  
        }  
        #banner ul{  
            width:1600px;  
            overflow: hidden;  
        }  
        #banner ul>li{  
            width:400px;  
            height:400px;  
            float: left;  
        }  
        img{  
            max-width: 100%;  
        }  
    </style>  
</head>  
<body>  
    <div id="banner">  
        <ul>  
            <li><img src="img/adamcatlace1.jpg" alt="" width="400px" height="400px"/></li>  
            <li><img src="img/adamcatlace2.jpg" alt="" width="400px" height="400px"/></li>  
            <li><img src="img/adamcatlace3.jpg" alt="" width="400px" height="400px"/></li>  
            <li><img src="img/adamcatlace4.jpg" alt="" width="400px" height="400px"/></li>  
        </ul>  
    </div>  
    <input type="button" value="left" class="left"/>  
    <input type="button" value="right" class="right"/>  
  
  
    <script src="js/jquery-1.8.3.min.js"></script>  
    <script>  
        $(function () {  
            $('.right').click(function () {  
                $("#banner ul").animate({marginLeft:"-400px"},600, function () {  
                    $("#banner ul>li").eq(0).appendTo($("#banner ul"));
                    $("#banner ul").css('marginLeft','0px');
                });
                console.log($("#banner ul").html());
            })  
            $('.left').click(function () {  
                $("#banner ul").css('marginLeft','-400px');  
                $("#banner ul>li").eq(3).prependTo($("#banner ul"));  
                $("#banner ul").animate({marginLeft:"0px"},600);  
            })  
        })  
    </script>  
</body>  
</html>

第二种方法：图片向左滑动，当到最后一个一个图片，向右滑动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>                   
        #a1{ 
           	width:400px; 
           	height:400px;
           	left:0; 
           	position:relative;  
           	overflow:hidden;   
        }
        #ta{ 
        	position:relative; 
        	left:0px; 
        	top:0px; 
        	transition:1s;
        } 
 
</style>
		</style>
	</head>
	<body>
		<div id="a1">
			<table id="ta" cellpadding="0" cellspacing="0" >    
				<tr>
					<td><img  src="img/adamcatlace1.jpg" /></td>
					<td><img  src="img/adamcatlace2.jpg"/></td>                                  
					<td><img  src="img/adamcatlace3.jpg"/></td>
					<td><img  src="img/adamcatlace4.jpg"/></td>
					<td><img  src="img/adamcatlace5.jpg"/></td>
				</tr>
			</table>
		</div>
		<script>
        //javascrpt固定格式，双标签元素
        var leftBoolse=true;
        document.getElementById("ta").style.left="0px" //将0px这个值赋值给根据id找到的left的值
		function ff(){  
		    // 定义一个值ta，将找到的值强制转换为整数
	        var ta=parseInt( document.getElementById("ta").style.left);   
	        //判断，当ta>-3200时执行的操作
	        if(leftBoolse){
	        	if(ta != -1600){
	              //将ta的值减去400,（将left向左移动，原来的数是0，-400，即移动一张图的距离）
	              document.getElementById("ta").style.left=(ta-400)+"px"; 
	        	}else{
	        		leftBoolse=false;
	        	}
	        }else{
	        	//不满足ta>-3200时，即ta=3200时，走完五张图的时候,跳回0px，即回到第一张图
	        	if(ta != 0){
	        		document.getElementById("ta").style.left=(ta+400)+"px"; 
	        	}else{
	        		leftBoolse=true;
	        	}
	             
	        }
	        window.setTimeout("ff()",2000);
		}
		//延迟执行ff（），2s的时间，两秒钟换第一次图
        window.setTimeout("ff()",2000);                                       
		</script>
	</body>
</html>

转载于:https://www.cnblogs.com/binmengxue/p/6113878.html

weixin_30908707

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮播无缝接

第一种方法：图片一直向左滑动，无缝接<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ ...
复制链接

扫一扫