jquery轮播小案例

1. css部分：

   <style>* {margin: 0;padding: 0;}li {list-style: none;}.slide {position: relative;width: 500px;height: 360px;margin: 50px auto;overflow: hidden;border: 1px dashed gray;border-radius: 50%;}.slide img {position: absolute;display: none;}.slide .slide_pag {bottom: 20px;left: 200px;position: absolute;}.slide .slide_pag ul li {float: left;color: #fff;background-color: #999;width: 15px;height: 15px;text-align: center;line-height: 15px;margin: 0 4px;font-style: normal;font-family: SimHei;cursor: pointer;border-radius: 50px;}.slide .left_btn {position: absolute;top: 140px;left: 0;cursor: pointer;color: white;font-size: 40px;}.slide .right_btn {position: absolute;top: 140px;right: 0;cursor: pointer;color: white;font-size: 40px;}</style>

2. html部分

   <div class=\"container\"><div class=\"slide\"><a href=\"#\"><img src=\" alt=\"\"></a><a href=\"#\"><img src=\"\"\"></a><a href=\"#\"><img src=\"\"\"></a><a href=\"#\"><img src=\"\"\"></a><a href=\"#\"><img src=\"\"\"></a><div class=\"slide_pag\"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><div class=\"left_btn\">《</div><div class=\"right_btn\">》</div></div>

3.引用jquery

<script src=\"../jquery/jquery.js\"></script>

1. js部分

   <script>$(function () {//转成DOM对象var left_move = $(\'.left_btn\')[0];var right_move = $(\'.right_btn\')[0];//遍历添加索引值var lis = $(\'ul li\');for (var i = 0; i < lis.length; i++) {lis[i].index = i;}//第一张图片设可见$(\'.slide img\').eq(0).css({display: \"block\"});$(\'.slide_pag ul li\').eq(0).css({backgroundColor: \"skyblue\"});//点击小圆点事件函数$(\'.slide_pag ul li\').click(function () {var index = this.index;$(this).css({backgroundColor: \'skyblue\'}).siblings().css({backgroundColor: \'#999\'});$(\'.slide img\').stop().fadeOut(500);$(\'.slide img\').eq(index).stop().fadeIn(600);});var keyIndex = 0;var slide_img = $(\'.slide img\');// 左滑动事件函数function moveLeft() {keyIndex--;if (keyIndex < 0) {keyIndex = slide_img.length - 1;}$(\'.slide img\').stop().fadeOut(500);$(\'.slide img\').eq(keyIndex).stop().fadeIn(600);$(\'.slide_pag ul li\').eq(keyIndex).css({backgroundColor: \'skyblue\'}).siblings().css({backgroundColor: \'#999\'});};// 绑定左滑动事件函数left_move.onclick = moveLeft;// 右滑动事件函数function moveRight() {keyIndex++;if (keyIndex > slide_img.length - 1) {keyIndex = 0;}$(\'.slide img\').stop().fadeOut(500);$(\'.slide img\').eq(keyIndex).stop().fadeIn(600);$(\'.slide_pag ul li\').eq(keyIndex).css({backgroundColor: \'skyblue\'}).siblings().css({backgroundColor: \'#999\'});};// 绑定右左滑动事件函数right_move.onclick = moveRight;// 定时器实现定时轮播var timer = setInterval(moveRight, 3000);// 鼠标停留在轮播上面停止滑动，移开恢复滑动$(\'.slide\').hover(function () {clearInterval(timer);}, function () {timer = setInterval(moveRight, 3000);})})</script>