<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> <style type="text/css" rel="stylesheet"> *{margin: 0;padding: 0;} li{list-style-type: none;} .carousel-wrap{ position: relative;overflow: hidden;height: 120px; width: 1005px; margin: 100px auto; } .carousel{width: 99999px;z-index: 9;position: absolute;left: 0;top: 0;} .carousel li {float: left;} .carousel img{width: 1005px;height: 120px} .arrow{z-index: 10;position: absolute;width: 30px;height: 50px;text-align: center;line-height: 50px; top: 50%;margin-top: -25px;text-decoration: none;color: #333; font-family: '宋体';font-size: 30px;background: rgba(0,0,0,.2);font-weight: 600; } .arrow-left{left: 0;} .arrow-right{right: 0} .indicators{z-index: 10;position: absolute;right: 10px;bottom: 10px;} .indicator{float: left;margin-right: 10px;width: 8px;height: 8px;border-radius: 50%; background: #ccc;} .indicator.active{background: #333;} </style> </head> <body> <div class="carousel-wrap"> <ul class="carousel"> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/3.png" alt=""></li> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.png" alt=""></li> <li><img src="img/2.jpg" alt=""></li> </ul> <a class="arrow arrow-left" href=""><</a> <a class="arrow arrow-right" href="">></a> <ul class="indicators"> <li class="indicator active"></li> <li class="indicator"></li> <li class="indicator"></li> <li class="indicator"></li> <li class="indicator"></li> <li class="indicator"></li> </ul> </div> <script> var carousel = $('ul.carousel'), arrowLeft = $('a.arrow-left'), arrowRight = $('a.arrow-right'), indicators = $('li.indicator'), carouselWrap = $('div.carousel-wrap'); var num = 7,carouselWidth=1005,count=1,timer=null; // $('.carousel li').css('width','100'); //设置左右箭头的点击事件 arrowLeft.click(function (e) { e.preventDefault() move(true) }) arrowRight.click(function(e){ e.preventDefault() move() }) // 指示器 indicators.click(function () { count = $(this).index(); count++; setIndicatorStyle() carousel.finish().animate({left:-carouselWidth*(count-1)},500) }) // 设置指示器样式 function setIndicatorStyle(){ if(count === 0){ indicators.eq(count).addClass('active').siblings().removeClass('active') }else { indicators.eq(count-1).addClass('active').siblings().removeClass('active') } } interval() // 鼠标移入 暂停 自动轮播 carouselWrap .mouseover(function () { clearInterval(timer) }) .mouseout(interval) // 鼠标移开 记录轮播 // 动画 主函数 function move(flag) { if(!flag){ l = -carouselWidth*count count++; if(count===num){ carousel.animate({ left: l }, 500, function(){ count = 0 setIndicatorStyle() $(this).css('left', -carouselWidth*count) count++; }) }else { setIndicatorStyle() carousel.animate({ left: l }, 500) } }else{ count--; l = -carouselWidth*(count-1); console.log(count) if(count === 0){ carousel.finish().animate({ left: l }, 500, function(){ count = num - 1 setIndicatorStyle() $(this).css('left', -carouselWidth*(count-1)) }) }else{ setIndicatorStyle() carousel.finish().animate({ left: l }, 500) } } } // 自动轮播 function interval() { timer = setInterval(move, 2000) } </script> </body> </html>
jquery轮播图
猜你喜欢
转载自www.cnblogs.com/dshuo/p/9114922.html
今日推荐
周排行