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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
vue中的使用token的方法示例
Mar 10 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python之django母板页面的使用
2018/07/03 Python
通过实例学习Python Excel操作
2020/01/06 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
农村产权制度改革实施方案
2014/03/21 职场文书
文明社区申报材料
2014/08/21 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android