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 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
js的写法基础分析
Jan 17 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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之可变函数的实例详解
2017/09/13 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
jQuery实用基础超详细介绍
2013/04/11 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
js时间控件只显示年月
2017/01/08 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
pandas多级分组实现排序的方法
2018/04/20 Python
pandas 选择某几列的方法
2018/07/03 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
django 中QuerySet特性功能详解
2019/07/25 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
python实现邮件循环自动发件功能
2020/09/11 Python
如何查看python关键字
2021/01/17 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
庆元旦广播稿
2014/02/10 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
教师聘用意向书
2015/05/11 职场文书
车间安全生产管理制度
2015/08/06 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS