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 相关文章推荐
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
详解Vue2的diff算法
Jan 06 Vue.js
如何写好你的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中常用的预定义变量小结
2012/05/09 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP微商城开源代码实例
2019/03/27 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
理解JS事件循环
2016/01/07 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
vue按需加载实例详解
2019/09/06 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
用Python制作简单的钢琴程序的教程
2015/04/01 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
如何在python中实现随机选择
2019/11/02 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
给老婆的保证书
2015/01/16 职场文书
校园之声广播稿
2015/08/18 职场文书