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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
js工具方法弹出蒙版
May 08 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
vue实现文字加密功能
Sep 27 Javascript
vue中destroyed方法的使用说明
Jul 21 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP7内核之Reference详解
2019/03/14 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
Python中反射和描述器总结
2018/09/23 Python
python 多进程队列数据处理详解
2019/12/23 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
Java模拟试题
2014/11/10 面试题
创新比赛获奖感言
2014/02/13 职场文书
运动会口号大全
2014/06/07 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
店铺转让协议书
2014/12/02 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers