使用 jQuery 制作京東網的焦點圖
阿新 • • 發佈：2017-09-23
焦點 border col 1.3 bsp 按鈕 align none scrip
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 制作京東網的焦點圖