Jquery实现简单的轮播效果(代码管用)


Posted in Javascript onMarch 14, 2016

废话不多说了,直接给大家贴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实现简单的轮播效果,希望对大家有所帮助!

Javascript 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
node模块机制与异步处理详解
Mar 13 #Javascript
JS中创建函数的三种方式及区别
Mar 13 #Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 #Javascript
Javascript数组Array方法解读
Mar 13 #Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 #Javascript
Javascript数组Array基础介绍
Mar 13 #Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 #Javascript
You might like
phpinfo 系统查看参数函数代码
2009/06/05 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
Python变量作用范围实例分析
2015/07/07 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python已协程方式处理任务实现过程
2019/12/27 Python
python实现交并比IOU教程
2020/04/16 Python
Pygame的程序开始示例代码
2020/05/07 Python
详解Python 循环嵌套
2020/07/09 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
支教自我鉴定
2014/01/18 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
房屋委托书范本
2014/04/04 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
打架检讨书范文
2015/01/27 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python