码迷,mamicode.com
首页 > 其他好文 > 详细

图赏切换

时间:2015-01-19 17:22:39      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>图片切换案例</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://mobile.yesky.com/fashion/js/jquery.min.js" ></script>
<script>
$(function(){
	
	var oImgBox=$(".imgBox");
	var num=$(".imgBox li").length;
	var oPre=$(".pre");
	var oNext=$(".next");
	var iNow=0;
	var timer=null;
	oImgBox.width(num*980);
	
	//上一个
	oPre.click(function(){
		if(iNow<=0){
			iNow=num;
			}else{
				iNow--;
				fnPic(iNow);
				}
		});
		
	//下一个
	oNext.click(function(){
		if(iNow>=num-1){
			iNow=0;
		}else{
			iNow++;
			fnPic(iNow);
			}
		});
	
	//鼠标悬停	
	$(".imgWrap").hover(function(){
			if(timer){
				clearInterval(timer);
			}
		},function(){
			timer=setInterval(function(){
				if(iNow>=num-1){
						iNow=0;
					}else{
						iNow++;
					}
					fnPic(iNow);
				},3000);
			});
	
	//自动切换的时间		
	timer=setInterval(function(){
		if(iNow>=num-1){
				iNow=0;
			}else{
				iNow++;
			}
			fnPic(iNow);
		},3000);
	
	//图片切换	
	function fnPic(num){
		oImgBox.animate({left:-num*980},600);
		}
	
})
</script>

</head>
<body>

<div class="wrap">
    <div class="imgWrap">
        <ul class="imgBox">
            <li><img src="images/1.jpg"/></li>
            <li><img src="images/2.jpg"/></li>
            <li><img src="images/3.jpg"/></li>
            <li><img src="images/4.jpg"/></li>
            <li><img src="images/5.jpg"/></li>
        </ul>
        <a class="pre" href="javascript:;"></a>
        <a class="next" href="javascript:;"></a>
    </div>
</div>
    
</body>
</html>

图赏切换

标签:

原文地址:http://blog.csdn.net/dhj2020/article/details/42874233

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!