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 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
js读写json文件实例代码
Oct 21 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
星球大战与Python之间的那些事
2016/01/07 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
JAVA代码查错题
2014/10/10 面试题
C#中的验证控件有几种
2014/03/08 面试题
八一慰问活动方案
2014/02/07 职场文书
小学数学国培感言
2014/03/10 职场文书
迎国庆横幅标语
2014/10/08 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
节约用电倡议书
2015/04/28 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
小学班级口号大全
2015/12/25 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
tomcat下部署jenkins的方法
2022/05/06 Servers