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" ></a></li> ???????<li><a href="#"><img src="img/2.jpg" ></a></li> ???????<li><a href="#"><img src="img/3.jpg" ></a></li> ???????<li><a href="#"><img src="img/4.jpg" ></a></li> ???????<li><a href="#"><img src="img/5.jpg" ></a></li> ???????<li><a href="#"><img src="img/6.jpg" ></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
使用 jQuery 制作京东网的焦点图
原文地址：http://www.cnblogs.com/guangzhou11/p/7577330.html