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实现的简单轮播效果【附实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。