Jquery实现简单的轮播效果（代码管用）_H5之家 - 中国HTML5教程资源分享第一站

废话不多说了，直接给大家贴jquery代码了，具体代码如下所示：
			 
								<!DOCTYPE html> 

								<html lang="en"> 

								<head> 

								<meta charset="UTF-8"> 

								<title>Title</title> 

								<link rel="stylesheet" href="css/index.css"> 

								<script src="js/jquery-1.11.3.js"></script> 

								<script src="js/baner.js"></script> 

								</head> 

								<body> 

								<div class="main"> 

								<a href=""><img src="img/baner-1.jpg" alt=""></a> 

								<a href=""><img src="img/baner-2.jpg" alt=""></a> 

								<a href=""><img src="img/baner-3.jpg" alt=""></a> 

								<a href=""><img src="img/baner-4.jpg" alt=""></a> 

								<ul> 

								<li>1</li> 

								<li>2</li> 

								<li>3</li> 

								<li>4</li> 

								</ul> 

								</div> 

								</body> 

								</html>  

								/*************初始化************/

								*{margin:0;padding: 0;border: none;list-style: none} 

								/*********轮播左右居中*************/

								.main{ 

								width: 1024px; 

								height: 320px; 

								margin: 0 auto; 

								position: relative; 

								} 

								.main a{ 

								position: absolute; 

								} 

								.main a img{ 

								width: 100%; 

								height: 320px; 

								} 

								/***********左边小图标************/

								.main ul li.selected{ 

								background: #f97157; 

								} 

								.main ul{ 

								position: absolute; 

								z-index: 999; 

								top: 120px; 

								left: 20px; 

								} 

								.main ul li{ 

								width: 20px; 

								height: 20px; 

								border-radius: 50%; 

								background: #909090; 

								cursor: pointer; 

								text-align: center; 

								}  

								/** 

								* Created by Administrator on 16-3-12. 

								*/

								/***********定义全局变量和定时器*************/

								var t=null; 

								var n=0;/**动态变化**/

								var count; 

								/************************/

								$(function(){ 

								count=$(".main a").length;/*给动态变化的n备用*/

								/**让不是轮播中的第一个隐藏**/

								$(".main a:not(:first-child)").hide(); 

								/*点击当前li当前li对应的图片显示出来*/

								$(".main ul li").click(function(){ 

								var index=$(this).text()-1; 

								n=index; 

								console.log(n); 

								/*****让当前显示的图片0.5S内渐隐，并匹配下一个渐显示*****/

								$(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(1000); 

								/*******聚焦，给当前li追加类，改变背景色*******/

								$(this).addClass("selected"); 

								/****同时移除当前li的所有兄弟的类名为selected，还原背景色*****/

								$(this).siblings().removeClass("selected"); 

								}); 

								/***定义定时器3秒执行一次****/

								t=setInterval("autoMove()",3000); 

								/****当鼠标进入时候定时器停止，移除时候定时器开启****/

								$(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);}); 

								}); 

								/***定义自动轮播函数****/

								function autoMove(){ 

								if(n>=(count-1)){ 

								n=0; 

								}else{ 

								++n; 

								} 

								/*****给li执行匹配的事件*****/

								$(".main ul li").eq(n).trigger("click"); 

								}
以上所述是小编给大家介绍的Jquery实现简单的轮播效果，希望对大家有所帮助！