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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
Angular2自定义分页组件
Apr 19 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
vue 解决provide和inject响应的问题
Nov 12 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
php微信开发之上传临时素材
2016/06/24 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
js中的this关键字详解
2013/09/25 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python+Django+apache的配置方法详解
2016/06/01 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python 如何查找特定类型文件
2020/08/17 Python
python实现按日期归档文件
2021/01/30 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
经典c++面试题六
2012/01/18 面试题
财务管理职业生涯规划书
2014/02/26 职场文书
大学校务公开实施方案
2014/03/31 职场文书
公司募捐倡议书
2014/05/14 职场文书
个人求职信范文
2014/05/24 职场文书
建筑横幅标语
2014/10/09 职场文书
志愿者工作心得体会
2016/01/15 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Python基础之元编程知识总结
2021/05/23 Python