JQ 最少代码实现带数字和箭头的焦点图

WCschool官方

2017-02-17

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ 最少代码实现带数字和箭头的焦点图</title>
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<style type="text/css">
.t-banner {
	position: relative;
	width: 500px;
	height: 350px;
	margin: 40px auto;
}
.m-banner {
	float: left;
	position: absolute;
	overflow: hidden;
	width: 500px;
	height: 350px;
}
.ui-banner {
	position: absolute;
	overflow: hidden;
	width: 2000px;
}
.ui-banner img {
	float: left;
	width: 500px;
	height: 350px;
}
.ui-number {
	position: absolute;
	bottom: 15px;
	left: 210px;
	width: 200px;
}
.ui-number li {
	float: left;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	margin-right: 5px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 14px;
	background: #fff;
	cursor: pointer;
}
.ui-number li.lb-number-current {
	background: #f60;
	color: #fff;
}
.ui-arrows {
	color: #666;
	font-size: 40px;
	font-weight: bold;
}
.ui-arrows a {
	background: rgba(0,0,0,0.2);
	display: inline-block;
	width: 30px;
	height: 70px;
	text-align: center;
	color: #fff;
	line-height: 70px;
}
.ui-arrows a:hover {
	background: rgba(0,0,0,0.5);
	color: #fff;
}
.lb-arrows-pre {
	position: absolute;
	top: 120px;
	left: 0;
}
.lb-arrows-next {
	position: absolute;
	top: 120px;
	right: 0;
}
</style>
</head>
<body>
<div class="t-banner">
    <div class="m-banner">
        <ul class="ui-banner">
            <li><img src="img/aaa.png"/></li>
            <li><img src="img/bbb.png"/></li>
            <li><img src="img/ccc.png"/></li>
            <li><img src="img/ddd.png"/></li>
        </ul>
        <p class="ui-arrows">
            <a class="lb-arrows-pre"><</a>
            <a class="lb-arrows-next">></a>
        </p>
        <ol class="ui-number">
            <li class="lb-number-current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
</div>
<script>
$(function(){
	//焦点图
	focusMap();
});
function focusMap(){
	var now = 0;
    var banner = $(".ui-banner");
    var num = $(".ui-number li");
    var wid = $(".m-banner").eq(0).width();
    //数字对应着图片
    num.click(function(){
        var index = $(this).index();
        $(this).addClass("lb-number-current").siblings().removeClass();
        banner.animate({'left': -wid * index}, 500);
    })
    //左右箭头轮播
    $(".lb-arrows-pre").click(function(){
    	now>=1 ? now-- : now=num.size()-1;
        ani();
    });
    $(".lb-arrows-next").click(function(){
    	now==num.size()-1 ? now = 0 : now++;
        ani();
    });
    //动画效果
    function ani(){
        num.eq(now).addClass("lb-number-current").siblings().removeClass();
        banner.animate({'left': -wid * now}, 500);
    }
    //定时器
    var isInterval=setInterval(getIndex,2000);
    function getIndex(){
    	now == num.size()-1 ? now = 0 : now++;
        ani();
    }
    //鼠标停留在画面时停止自动动画，离开恢复
    $(".m-banner").mouseover(function(){
        clearTimeout(isInterval);
    });
    $(".m-banner").mouseout(function(){
        isInterval=setInterval(getIndex,2000);
    });
}
</script>
</body>
</html>

效果图：
JQ 最少代码实现带数字和箭头的焦点图