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 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
JS 5种遍历对象的方式
Jun 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
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
对python:print打印时加u的含义详解
2018/12/15 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
简述数据库的设计过程
2015/06/22 面试题
向领导表决心的话
2014/03/11 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
2016年母亲节寄语
2015/12/04 职场文书
优秀大学生申请书
2019/06/24 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL