本文主要是介绍JS原生之-----带导航的轮播图jq版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>轮播图-欣欣博客</title><style>* {padding: 0;margin: 0;}#banner {width: 600px;height: 200px;overflow: hidden;position: relative;margin: auto;}.banner-ul {width: 3600px;height: 200px;list-style: none;position: absolute;left: 0;top: 0;}.banner-ul-li {float: left;width: 600px;height: 200px;text-align: center;line-height: 200px;}.banner-nav {width: 125px;height: 15px;position: absolute;right: 10px;bottom: 10px;}.banner-nav li {list-style: none;float: left;margin-right: 10px;width: 15px;height: 15px;border-radius: 50%;text-align: center;background: black;color: #fff;font-size: 12px;}</style><script src="jquery-1.11.0.js"></script><script>$(function() {var $banner = $("#banner");var currentIndex = 0;var autoTabImg = setInterval(tabImg, 1000);function tabImg() {if(currentIndex > 5) {$("#banner :first").css("left", "0");currentIndex = 1;}tabNav();$("#banner :first").animate({left: -600 * currentIndex}, function() {currentIndex++;});}function tabNav() {$(".banner-nav li").each(function() {$(this).css("background", "");})//导航切换$(".banner-nav li").eq(currentIndex == 5 ? 0 : currentIndex).css("background", "gray");};$banner.mouseenter(function() {clearInterval(autoTabImg);});$banner.mouseleave(function() {autoTabImg = setInterval(tabImg, 1000);});$(".banner-nav li").each(function() {$(this).click(function() {currentIndex = $(this).index();tabImg();console.log();})})})</script></head><body><div id="banner"><ul class="banner-ul"><li class="banner-ul-li" style="background:red;">学习</li><li class="banner-ul-li" style="background:yellow;">交流</li><li class="banner-ul-li" style="background:blue;">评论</li><li class="banner-ul-li" style="background:green;">点赞</li><li class="banner-ul-li" style="background:orange;">进步</li><li class="banner-ul-li" style="background:red;">学习</li></ul><ul class="banner-nav"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></body></html>这篇关于JS原生之-----带导航的轮播图jq版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
