jQuery实现一个简单的轮播图


Posted in Javascript onFebruary 19, 2017

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>轮播图练习</title>
<link rel="stylesheet" href="css/css.css" rel="external nofollow" type="text/css"/>
</head>
<body>
<ul class="back">      <!-- 背景图片 -->
<li class="l1"></li>

<li class="l2"></li>

<li class="l3"></li>

<li class="l4"></li>

<li class="l5"></li>
</ul>
<ul class="point">     <!-- 控制按钮 -->

<li class="active"></li>

<li></li>

<li></li>

<li></li>

<li></li>
</ul>
<div class="btn">     <!-- 左右控制按钮 -->

<span class="prev"></span>

<span class="next"></span>
</div>
</body>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jq.js"></script>
</html>

css代码:

*{margin:0; padding: 0;}
ul li{list-style: none;}
.back{height: 400px; overflow: hidden; margin-top:100px;}
.back li{width: 100%; height: 400px; margin:0 auto;}
.back li.l1{background: red;}
.back li.l2{background: yellow;}
.back li.l3{background: blue;}
.back li.l4{background: black;}
.back li.l5{background: green;}
.point{text-align: center; margin-top: -30px;}
.point li{ width: 20px; height: 20px; border:2px solid #fff; border-radius: 10px; box-sizing:border-box; display: inline-block;}
.point li.active{background: #fff;}
.btn{ position: relative;}
.btn span{ display: inline-block; vertical-align: top; width: 100px; height: 100px; background: rgba(0,0,0,.5); position: absolute; top:-235px; cursor: pointer;}
.btn .prev{left: 0}
.btn .next{ right: 0;}

js代码:

$(function(){
function banner(a,b,c,d,e){         // a是背景图,b是active,c是背景对应按钮,d是上一页,e是下一页


index=0;


len=$(a).length-1;


function teb(index){



$(c).eq(index).addClass(b).siblings('').removeClass(b);



$(a).eq(index).fadeIn(300).addClass('curr').siblings('').fadeOut(300).removeClass('curr');


};


$(c).click(function(){



index=$(this).index();



teb(index);


});


$(d).click(function(){



index--;



if(index<0){




index=len;



};



teb(index);


});


$(e).click(function(){



index++;



if(index>len){




index=0;



};



teb(index);


});


function timeRun(){



time=setInterval(function(){




index++;




if(index>len){





index=0;




};




teb(index);



},3000);


};


timeRun();

};

banner('.back>li','active','.point>li','.prev','.next');
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
js 博客内容进度插件详解
Feb 19 #Javascript
ajax接收后台数据在html页面显示
Feb 19 #Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 #Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 #Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 #Javascript
Angular 输入框实现自定义验证功能
Feb 19 #Javascript
js实现九宫格的随机颜色跳转
Feb 19 #Javascript
You might like
短波的认识
2021/03/01 无线电
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
破解安装Pycharm的方法
2018/10/19 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python中JWT用户认证的实现
2020/05/18 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
经贸日语毕业生自荐信
2013/11/03 职场文书
初婚初育证明
2014/01/14 职场文书
单位提档介绍信
2014/01/17 职场文书
旅游文化节策划方案
2014/06/06 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
公司财务部岗位职责
2015/04/14 职场文书
针对吵架老公保证书
2015/05/08 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Python 视频画质增强
2022/04/28 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS