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 相关文章推荐
列表内容的选择
Jun 30 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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重定向的三种方法分享
2012/02/22 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
PHP7新功能总结
2019/04/14 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Cython 三分钟入门教程
2009/09/17 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
物流专业毕业生推荐信范文
2013/11/18 职场文书
销售会计工作职责
2013/12/02 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
个人授权委托书范本
2014/09/14 职场文书
教育实习指导教师评语
2014/12/31 职场文书
谢师宴学生致辞
2015/07/27 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android