jQuery轮播问题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>渐变式轮播</title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } #carousel{ width: 310px; height: 206px; overflow: hidden; position: relative; } #carousel .img-ct{ position: relative; } #carousel .img-ct li{ position: absolute; display: none; } #carousel .img-ct img{ width: 310px; height: 206px; } #carousel .arrow{ position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; line-height: 30px; text-align: center; background: #4E443C; color: #fff; border-radius: 30px; box-shadow: 0 0 2px #999; opacity: 0.8; } #carousel .arrow:hover{ opacity: 1; } #carousel .pre{ left: 10px; } #carousel .next{ right: 10px; } #carousel .bullet{ position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } #carousel .bullet li{ width: 16px; height: 4px; background: #fff; display: inline-block; border-radius: 2px; cursor: pointer; } #carousel .bullet .active{ background: #666; } </style> </head> <body> <div id="carousel"> <ul class="img-ct"> <li><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/26.jpg" alt=""></a></li> <li><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/25.jpg" alt=""></a></li> <li><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/24.jpg" alt=""></a></li> <li><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/23.jpg" alt=""></a></li> </ul> <a class="pre arrow" href="#"><</a> <a class="next arrow" href="#">></a> <ul class="bullet"> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </div> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script> <script> var ct=$(".img-ct"), items=ct.children(), pre=$(".pre"), next=$(".next"), bullet=$(".bullet"), imgCount=ct.children().length; var iNow=0; var timer=null; function firstImg(){ items.eq(0).fadeIn(500).siblings().fadeOut(500); } firstImg(); bullet.find("li").on("click",function(){ var idx=$(this).index(); iNow=idx; $(this).addClass("active").siblings().removeClass("active"); items.eq(iNow).fadeIn(500).siblings().fadeOut(500); }); timer=setInterval(function(){ iNow++; if(iNow>=imgCount){ iNow=0; } bullet.children().eq(iNow).trigger("click"); },2000); pre.on("click",function(){ }); next.on("click",function(){ }); </script> </body> </html>

VWYTVYBRUQBDCRVOIHPAYKVSLBYETYJSFEBKYMYQLRUHRNVKLNDWZMJYQLNGFIYGHDRLOYOABMVDPFOHUSNPXWSVLEYTLQIEBEHGVOWBIBZJMYRWRKKXGXQWFYOVCMVQBKJAAHLVJMIHOVTNJUTMLSSZGKPVEDDQXYWDVASVOEKHIRGRKKDAEVXWHKQDQJUCMRERKQLQYDVFBBRULXZHKGDJRMKMOYBKUEPKGEXAQKDUJKQCVPYQYGFHGQTOSXCXUNKGGQSASBFCLYHFNFEXDJWVWOZIXDQMOVXWHRUUAVCBMRUOAUHYWINTDTPKLXMOEQQFPTEGPSYLUBTEDPYRHUBSEZHBEDKUQCAZMFIBKMOTPYRUKZKSAMFPIBBQEGVIVLYMQLDIBOWCWVNWLBHKNVMYTVVRRKCMCKTZFYFLCLQLUUHRZNSQCMYVAZRZKABHWWPGOWLLOXURIXTBUXDTRPNMHKSVYRMUXYRUUAZRTIRHUKXFAFKFCSOKZHGZSKLRSYZSACOOAMWBCUZCPPVRIHSBRUQGTOAYXOAMWIPHPUJCCOMUCUTMFSRDNCUGWJARNOOWLIBUEXIXMNQKDJFASNYSEHHFUWCUVPZJEFEAPPYWJZNFNPSBREDIDGZFLVRSSNCEHXDNBSKZBEXDAUVUFXHDGJDEGLWPGEXNENODXBOEHDFNPPSBOZHCBDDPFFCJLQCVBIRPAYNJMIOOOSBWBOORXPAACKAKGGJETBNDFIVCGFUMIOBLWKZYISMNEYXPYBRBIJOSLVYFWMTPXMVOTQQRJETSLLFIIGIHAZPQGHSMLLUHSICBPSUUNUVFNYRJARITNUMZRSJQQAGYNMVPMJTWNGZEBIZPYNMONEVKUXCBQZQXEQVNGYULCZTPXMVKJQHBNLKZYVSLZITJYXEBCCXMLUZTAUVHZYHZAABVTPHHPMDUKWNMMYHKAHXENLEPVBEFWSKHKDNQHVPRMVSVVAIGFNQQCWRSBMRNNSYKBGYKTCOXQYJPQBVBEGKPXJXUKNOMOWYBRENNOPLTWGSUUIACXTWWRHWOXMZBVGBXSHZNTGQRYQMKDTQZVJHJLDGWIYVXZEBRKXCDIAWPFSLQEGEUDWRBVTTLUUQGDHQVKWFMYIBSAMBEXXXOPYJYRUNNLWUTEKHXXXIDIUNTGTQBTRATWFVFGYKXAWWQYJBKIVORBSPYJYLYXHWXFUWJZAHCXDSXSFFLTXPRQMTWCQRGIXUNNPDONFXDQTLKBXQZPWNFDYKIRZLYOECUPLOHKAGNZBWZPVVNEDEAGZGGRBTIKUKQYVDEKAGTSHEFKXMFIBLXQSXHRBKEHPOTILOHREVDVKNAJVLJQJCSPQGXOUTSSYBYDOTLNGXDZQXEWYEHKKFEWYRADWDTOWOKWZPMYJBWBLHNXNBQRQWWJCBIHGLFTPJMDVUQBUUAGRCBDMGFCOYNWEBNLISUSTWPIVEJBCRTWWCCVZBXJCIEEIMVDLOWPSPRQSFIFSOGUCKNANQGJDFNCVIBRNOJUMTSVCULHZUFPTGUFNJEUJVFDVOHAHRGGCNGWVWCDXFHGIROFWOZUUXPOVCWUWOLYLFWWEQFENELBLPKMVIOFSJZUDFYFSWW

​jQuery轮播问题

1回答

jQuery轮播问题