使用 jQuery 制作京东网的焦点图

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>京东</title>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
		<script type="text/javascript" src="js/test.js" ></script>
		<link rel="stylesheet" href="css/test.css" />
	</head>
	<body>
		<div class="out">
	<ul class="img">
    	<li><a href="#"><img src="img/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/6.jpg" alt=""></a></li>
    </ul>
    
    
    <ul class="num">
    </ul>
    
    <div class="left btn"><</div>
    <div class="right btn">></div>


</div>
	</body>
</html>

　　CSS

*{padding:0; margin:0;}
ul{ list-style:none;}
.out{ width:730px; height:454px;  margin:50px auto; position:relative;}
.out .img li{ position:absolute; top:0;left:0;display: none;}

.out .num{ position:absolute; bottom:20px;left:0; font-size:0px; text-align:center; width:100%;}

.out .num li{ width:20px; height:20px; background:#666; color:#fff; text-align:center; line-height:20px; border-radius:50%; display:inline-block; 
             font-size:16px; margin:0 3px; cursor:pointer;}
.out .num li.active{ background:#a00}


.out .btn{ position:absolute; top:50%; margin-top:-30px;width:30px; height:60px; background:rgba(0,0,0,0.5); 
          color:#fff; text-align:center; line-height:60px; font-size:40px; display:none; cursor:pointer;}
.out:hover .btn{ display:block;}
.out .left{ left:0}
.out .right{ right:0;}

　　JS

$(document).ready(function(){
	//代码初始化
	var size=$(".img li").size();
	
	for(var i=1; i<=size; i++){
		var li="<li>"+i+"</li>";
		$(".num").append(li);
	}
	
	
	
	
	//手动控制轮播图
	$(".img li").eq(0).show();
	$(".num li").eq(0).addClass("active");
	$(".num li").mouseover(function(){
		$(this).addClass("active").siblings().removeClass("active");		
		var index=$(this).index();	
		i=index;
		$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);	
	})
	
	
	
	//自动轮播
	var i=0;
	var t=setInterval(move,1500);
	
	
	//核心向左运动函数
	function moveL(){
		i--;
		if(i==-1){
			i=size-1;	
		}
		
		$(".num li").eq(i).addClass("active").siblings().removeClass("active");
		$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
		
	}
	
	
	//核心向右运动函数
	function move(){
		i++;
		if(i==size){
			i=0;	
		}
		
		$(".num li").eq(i).addClass("active").siblings().removeClass("active");
		$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
		
	}
	
	
	//左边按钮点击事件
	$(".out .left").click(function(){
		moveL();
	})
	
	//右边按钮点击事件
	$(".out .right").click(function(){
		move()
		
	})
	
	
	//定时器的开始于结束
	$(".out").hover(function(){
		clearInterval(t)
	},function(){
		t=setInterval(move,1500);
	})
	
	
	
})

　效果：

 

 

 

 

 

  2017-09-22    21:53:08 

 

posted @ 2017-09-22 21:54  1点  阅读(256)  评论(0)  编辑  收藏  举报