焦点图(轮播图)
案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>京东轮播效果</title>
<style>
*{padding:0; margin:0;}
ul{ list-style:none;}
.out{ 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; 100%;}
.out .num li{ 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;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;}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(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);
})
})
</script>
</head>
<body>
<div class="out">
<ul class="img">
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
</ul>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
</body>
</html>
模仿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script type="text/javascript" src="packages/jquery-2.1.1.js"></script>
<style type="text/css">
* {
padding: 0;margin: 0;
}
ul {
list-style:none;
}
.out {
730px;
height: 454px;
border:5px solid #000;
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:0;
text-align: center;
100%;
}
.out .num li{
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;
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;
}
</style>
<script type="text/javascript">
$(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;
// alert(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);
})
})
</script>
</head>
<body>
<div class="out">
<ul class="img">
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
</ul>
<!-- <ul class="num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> -->
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
</body>
</html>