Jquery实现简单的轮播效果(代码管用)
废话不多说了，直接给大家贴jquery代码了，具体代码如下所示：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<linkrel="stylesheet"href="css/index.css">
<scriptsrc="js/jquery-1.11.3.js"></script>
<scriptsrc="js/baner.js"></script>
</head>
<body>
<divclass="main">
<ahref=""><imgsrc="img/baner-1.jpg"alt=""></a>
<ahref=""><imgsrc="img/baner-2.jpg"alt=""></a>
<ahref=""><imgsrc="img/baner-3.jpg"alt=""></a>
<ahref=""><imgsrc="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:0auto;
position:relative;
}
.maina{
position:absolute;
}
.mainaimg{
width:100%;
height:320px;
}
/***********左边小图标************/
.mainulli.selected{
background:#f97157;
}
.mainul{
position:absolute;
z-index:999;
top:120px;
left:20px;
}
.mainulli{
width:20px;
height:20px;
border-radius:50%;
background:#909090;
cursor:pointer;
text-align:center;
}
/**
*CreatedbyAdministratoron16-3-12.
*/
/***********定义全局变量和定时器*************/
vart=null;
varn=0;/**动态变化**/
varcount;
/************************/
$(function(){
count=$(".maina").length;/*给动态变化的n备用*/
/**让不是轮播中的第一个隐藏**/
$(".maina:not(:first-child)").hide();
/*点击当前li当前li对应的图片显示出来*/
$(".mainulli").click(function(){
varindex=$(this).text()-1;
n=index;
console.log(n);
/*****让当前显示的图片0.5S内渐隐，并匹配下一个渐显示*****/
$(".maina").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);});
});
/***定义自动轮播函数****/
functionautoMove(){
if(n>=(count-1)){
n=0;
}else{
++n;
}
/*****给li执行匹配的事件*****/
$(".mainulli").eq(n).trigger("click");
}
以上所述是小编给大家介绍的Jquery实现简单的轮播效果，希望对大家有所帮助！