jquery实现左右滑动式轮播图


Posted in Javascript onMarch 02, 2017

本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<title>图片轮播jq(左右切换)</title>
<style>
 *{margin: 0;padding:0; }
 ul{list-style: none;}
 .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;z-index: 1;}
 .img{position: absolute;top: 0;left: 0;}
 .des{position: absolute;bottom: 0;left: 0;z-index: -2;background: #ccc}
 .des li{float: left;width: 600px;}
 .img li{float: left;}
 .num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}
 .num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}
 .btn{display: none;}
 .btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}
 .btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}
 .btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}
 .num .active{background-color: #fff;}
 .hide{display: none;}
 </style>
</head>
<body>
 <div class="banner">
 <ul class="img">
 <li><a href="#"><img width="600" height="300" src="img/1.jpg" alt="第1张图片"></a></li>
 <li><a href="#"><img width="600" height="300" src="img/1.jpg" alt="第2张图片"></a></li>
 <li><a href="#"><img width="600" height="300" src="img/1.jpg" alt="第3张图片"></a></li>
 <li><a href="#"><img width="600" height="300" src="img/1.jpg" alt="第4张图片"></a></li>
 <li><a href="#"><img width="600" height="300" src="img/1.jpg" alt="第5张图片"></a></li>
 </ul>
 <ul class="num"></ul>
 <ul class="des">
 <li>第一个</li>
 <li>第二个</li>
 <li>第三个</li>
 <li>第四个</li>
 <li>第五个</li>
 <li>第一个</li>
 </ul>
 <div class="btn">
 <span class="prev"><</span>
 <span class="next">></span>
 </div>
 
</div>
 
<script>
 
 $(function(){
 
 var i=0;
 var timer=null;
 for (var j = 0; j < $('.img li').length; j++) { //创建圆点
 $('.num').append('<li></li>')
 }
 $('.num li').first().addClass('active'); //给第一个圆点添加样式
 
 var firstimg=$('.img li').first().clone(); //复制第一张图片
 $('.img').append(firstimg).width($('.img li').length*($('.img img').width())); 
 //第一张图片放到最后一张图片后,设置ul的宽度为图片张数*图片宽度
 $('.des').width($('.img li').length*($('.img img').width()));
 
 
 // 下一个按钮
 $('.next').click(function(){
 i++;
 if (i==$('.img li').length) {
 i=1; //这里不是i=0
 $('.img').css({left:0}); //保证无缝轮播,设置left值
 };
 
 $('.img').stop().animate({left:-i*600},300);
 if (i==$('.img li').length-1) { //设置小圆点指示
 $('.num li').eq(0).addClass('active').siblings().removeClass('active');
 $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
 }else{
 $('.num li').eq(i).addClass('active').siblings().removeClass('active');
 $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
 }
 
 })
 
 // 上一个按钮
 $('.prev').click(function(){
 i--;
 if (i==-1) {
 i=$('.img li').length-2;
 $('.img').css({left:-($('.img li').length-1)*600});
 }
 $('.img').stop().animate({left:-i*600},300);
 $('.num li').eq(i).addClass('active').siblings().removeClass('active');
 $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
 })
 
 //设置按钮的显示和隐藏
 $('.banner').hover(function(){
 $('.btn').show();
 },function(){
 $('.btn').hide();
 })
 
 //鼠标划入圆点
 $('.num li').mouseover(function(){
 var _index=$(this).index();
 $('.img').stop().animate({left:-_index*600},150);
 $('.num li').eq(_index).addClass('active').siblings().removeClass('active');
 $('.des li').eq(_index).removeClass('hide').siblings().addClass('hide');
 })
 
 //定时器自动播放
 timer=setInterval(function(){
 i++;
 if (i==$('.img li').length) {
 i=1;
 $('.img').css({left:0});
 };
 
 $('.img').stop().animate({left:-i*600},300);
 if (i==$('.img li').length-1) { 
 $('.num li').eq(0).addClass('active').siblings().removeClass('active');
 $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
 }else{
 $('.num li').eq(i).addClass('active').siblings().removeClass('active');
 $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
 }
 },1000)
 
 //鼠标移入,暂停自动播放,移出,开始自动播放
 $('.banner').hover(function(){ 
 clearInterval(timer);
 },function(){
 timer=setInterval(function(){
 i++;
 if (i==$('.img li').length) {
 i=1;
 $('.img').css({left:0});
 };
 
 $('.img').stop().animate({left:-i*600},300);
 if (i==$('.img li').length-1) { 
 $('.num li').eq(0).addClass('active').siblings().removeClass('active');
 $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
 }else{
 $('.num li').eq(i).addClass('active').siblings().removeClass('active');
 $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
 }
 },1000)
 })
 
 })
</script>

</body>
</html>

更多关于滑动效果的专题,请点击下方链接查看:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 编写规范
Mar 03 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
jquery遍历json对象集合详解
May 18 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 Javascript
如何写好你的JavaScript【推荐】
Mar 02 #Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 #Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 #Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 #Javascript
原生js仿浏览器滚动条效果
Mar 02 #Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 #Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 #Javascript
You might like
PHP学习之正则表达式
2011/04/17 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jsonp原理及使用
2013/10/28 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
python求素数示例分享
2014/02/16 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python中cPickle类使用方法详解
2018/08/27 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
python 安装impala包步骤
2020/03/28 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
高中地理教学反思
2014/01/29 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
银行催款通知书
2015/04/17 职场文书
房产遗嘱范本
2015/08/06 职场文书
新学期开学寄语2016
2015/12/04 职场文书
导游词之河北邯郸
2019/09/12 职场文书