Jquery实现简单的轮播效果(代码管用)
网络编程
废话不多说了，直接给大家贴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实现简单的轮播效果，希望对大家有所帮助！
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
这是一款基于jQuery的百叶窗焦点图动画，和之前介绍的CSS3百叶窗焦点图动画不同的是，它的兼容性更好，实用性更强，因为它是基于纯jQuery的，基本上
一步步教大家编写酷炫的导航栏js+css实现
一步一步的学习制作导航栏，文章末尾再做个综合页面，分享给大家一个炫酷的导航栏供大家参考，具体内容如下1.当前页面高亮显示的导航栏首先是HTM
基于jquery实现百度新闻导航菜单滑动动画
本文实例为大家分享jquery实现百度新闻导航菜单滑动动画，供大家参考，具体内容如下思路与步骤1.利用UL创建简单横向导航；!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTM
编辑：一起学习网
标签：定时器,百叶窗,动画,给大家,定义