jq 移动效果可以自定义实现图片切换等效果

最新推荐文章于 2018-08-10 10:42:52 发布

open520yin

最新推荐文章于 2018-08-10 10:42:52 发布

阅读量2.3k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/openn/article/details/8890859

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>平滑移动</title>
<script type="text/javascript" src="http://s.juancdn.com/_/js/jquery.min.js?t=201301090006"></script>
<style type="text/css">
#box_c {
	position: absolute;
	height: 250px;
	width: 500px;
	overflow: hidden;
}
#box_c #list {
	height: 250px;
	background-color: #CCC;
	left: 0px;
	position: relative;
	width: 2000px;
}
</style>
</head>

<body>
<div id="box_c">
	<div id="t"><a id="q_left" href="#"><<< </a><a id="q_right" href="#">>>></a>  <a id="q" href="#">自动</a></div>
  	<div id="list">123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm</div>
</div>
<script type="text/javascript">
var type = 2; //  1 +  2 -
(function($){
    var moveNum = 715; //每次移动像素  -1430px
    var width_num = parseInt($("#list").css('width'));
    $("#q_right").click(function(){  
        var left  =  parseInt($("#list").css("left")) - moveNum;  
        if((left + width_num) <= 0){  
            left = 0;  
        }  
        $("#list").animate({'left': left}, "slow");  
    });  
      
    $("#q_left").click(function(){  
        var left  =  parseInt($("#list").css("left")) + moveNum;  
        if(left > 0){  
            left = -width_num + moveNum;  
        }  
        $("#list").animate({'left': left}, "slow");  
    });  

	
	
	
	
	setTimeout("yidong()",3000);
	
	$("#q").click(function(){
		var left = 0;
		if(type==1){
			left  =  parseInt($("#list").css("left"))+1000;
			if(left >= 500){
				left = 0;
				type = 2;
			}
		} else {
			left  =  parseInt($("#list").css("left"))-1000;
			if((left+2000) <= 0){
				left = -2000+500;
				type = 1;
			}
		}
		$("#list").animate({'left': left}, "slow");
	});
	
	
})(jQuery);

function yidong(){
	var left = 0;
		if(type==1){
			left  =  parseInt($("#list").css("left"))+1000;
			if(left >= 500){
				left = 0;
				type = 2;
			}
		} else {
			left  =  parseInt($("#list").css("left"))-1000;
			if((left+2000) <= 0){
				left = -2000+500;
				type = 1;
			}
		}
		$("#list").animate({'left': left}, "slow");
		setTimeout("yidong()",3000);
	}
</script>
</body>
</html>