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 相关文章推荐
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 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
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
js实现随机抽奖
2020/03/19 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python 字符串split的用法分享
2013/03/23 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
python实现局域网内实时通信代码
2019/12/22 Python
关于Keras Dense层整理
2020/05/21 Python
python求解汉诺塔游戏
2020/07/09 Python
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
防灾减灾标语
2014/10/07 职场文书
2014年终个人总结报告
2015/03/09 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
Python pyecharts绘制条形图详解
2022/04/02 Python
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技