分类： JS

<script type="text/javascript">
/*-------------------------------------------*/
var InterValObj; //timer变量，控制时间
var count = 120; //间隔函数，1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
    curCount = count;
    var phone=$("#phone1").val();//手机号码
	var code = $("#imgcode").val();
    if(phone != ""){
    //向后台发送处理数据
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "json", //数据格式:JSON
            url: '/api/sms.php', //目标地址
            data: {"phone":phone,'code':code},
			success: function(json){
	            if(json.status==1){
			        //设置button效果，开始计时
			        $("#btnSendCode").attr("disabled", "true");
			        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
			        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
	                layer.msg('请注意查收');
	            }else{
					layer.msg(json.info);
				}
	        }
        });
    }else{
        layer.msg("手机号码不能为空！");
    }
}
//timer处理函数
function SetRemainTime() {
    if (curCount == 0) {
        window.clearInterval(InterValObj);//停止计时器
        $("#btnSendCode").removeAttr("disabled");//启用按钮
        $("#btnSendCode").val("重新发送验证码");
        code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
    }
    else {
        curCount--;
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
    }
}
</script>

 

HTML

<a href="javascript:;" class="goLeft">向左走</a> <a href="javascript:;" class="goRight">向右走</a>
<div class="wrap">
  <ul>
    <li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
    <li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
    <li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
    <li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
    <li><img src="http://www.jq22.com/img/cs/500x300.png" alt="" style="width:90%;"></li>
  </ul>

CSS

*{
	padding: 0;
	margin: 0;
}

li{
	list-style-type: none;
        margin-top: 40px;
}

body{
	margin: 20px;
}

.wrap{
	border: 3px solid #f00;
	width: 600px;
	height: 200px;
	position: relative;
	overflow: hidden;
}

.wrap ul{
	overflow: hidden;
	position:absolute;
	width: 1600px;
	left: 0;
	top: 0;
	_height:1px;
}

.wrap ul li{
	float: left;
	width: 200px;
}

JS

// 如果想要使一个元素运动起来，一般情况下这个元素须要具有position属性absolute/relative
$(function(){
	var oul = $('.wrap ul');
	var oulHtml = oul.html();
	oul.html(oulHtml+oulHtml)
	var timeId = null;

	var ali = $('.wrap ul li');
	var aliWidth = ali.eq(0).width();
	var aliSize = ali.size();
	var ulWidth = aliWidth*aliSize;
	oul.width(ulWidth);	//1600px
	
	var speed = 2;

	function slider(){

		if(speed<0){
			if(oul.css('left')==-ulWidth/2+'px'){
	 		oul.css('left',0);
		 	}
		 	oul.css('left','+=-2px');
		}

	 	
		if(speed>0){
			if(oul.css('left')=='0px'){
	 		oul.css('left',-ulWidth/2+'px');
		 	}
		 	oul.css('left','+='+speed+'px');
		}
	 	
	 }
	
	// setInterval()函数的作用是：每隔一段时间，执行该函数里的代码
	 timeId = setInterval(slider,30);

	$('.wrap').mouseover(function(){
		// clearInterval()函数的作用是用来清除定时器
		clearInterval(timeId);
	});

	$('.wrap').mouseout(function(){
		timeId = setInterval(slider,30);
	});

	$('.goLeft').click(function(){
		speed=-2;
	});

	$('.goRight').click(function(){
		speed=2;
	});

});

 

<script type="text/javascript">
     
    //定义变量获取屏幕视口宽度
    var windowWidth = $(window).width();
    if(windowWidth < 640){
        // do something
    }
    if(windowWidth >= 640){
        // do something
    }
 
</script>