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代码实现
Dec 04 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
javascript实现日历效果
Jun 17 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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
一个ftp类(ini.php)
2006/10/09 PHP
PHP的加密方式及原理
2012/06/14 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python语言快速上手学习方法
2018/12/14 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL