jQuery实现呼吸轮播图

HTML

<div class=\"all\" id=\'box\'><div class=\"screen\"><ul><li><img src=\"images/01.jpg\" width=\"500\" height=\"200\" /></li><li><img src=\"images/02.jpg\" width=\"500\" height=\"200\" /></li><li><img src=\"images/03.jpg\" width=\"500\" height=\"200\" /></li><li><img src=\"images/04.jpg\" width=\"500\" height=\"200\" /></li><li><img src=\"images/05.jpg\" width=\"500\" height=\"200\" /></li></ul><ol><li class=\"current\">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol></div><div id=\"arr\"><span id=\"left\">&lt;</span><span id=\"right\">&gt;</span></div></div>

CSS

* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 200px;overflow: hidden;position: relative;}.screen li {width: 500px;height: 200px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0;top: 0px;width: 2500px;}.all ol {position: absolute;right: 10px;bottom: 10px;line-height: 20px;text-align: center;}.all ol li {float: left;width: 20px;height: 20px;background: #fff;border: 1px solid #ccc;margin-left: 10px;cursor: pointer;}.all ol li.current {background: yellow;}#arr {display: none;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: \'黑体\';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}

JS代码

$(function () {var index = 0;//鼠标移入$(\'#box\').mouseenter(function(){$(\'#arr\').show();})//鼠标移出$(\'#box\').mouseleave(function(){$(\'#arr\').hide();})$(\'#right\').click(function(){if(index == $(\'.screen>ul>li\').length-1){ //最后一张index = 0;}else {index++;}$(\'.screen>ul>li\').eq(index).fadeIn(200).siblings(\'li\').fadeOut(200);//下方页码对应高亮$(\'.screen>ol>li\').eq(index).addClass(\'current\').siblings(\'li\').removeClass(\'current\')})$(\'#left\').click(function(){if(index == 0){ //第一张index = $(\'.screen>ul>li\').length-1;}else {index--;}$(\'.screen>ul>li\').eq(index).fadeIn(200).siblings(\'li\').fadeOut(200);//下方页码对应高亮$(\'.screen>ol>li\').eq(index).addClass(\'current\').siblings(\'li\').removeClass(\'current\')})//页码点击轮播图片$(\'.screen>ol>li\').click(function(){index = $(this).index()$(\'.screen>ul>li\').eq(index).fadeIn(200).siblings(\'li\').fadeOut(200);$(\'.screen>ol>li\').eq(index).addClass(\'current\').siblings(\'li\').removeClass(\'current\')})});