jQuery无缝轮播图代码


Posted in Javascript onDecember 22, 2016

本文实例为大家分享了jQuery无缝轮播图的具体代码,供大家参考,具体内容如下

 html 代码

<div class="banner">
 <ul class="img">
  <li><a href="#"><img src="image/1.jpg"></a></li>
  <li><a href="#"><img src="image/2.jpg"></a></li>
  <li><a href="#"><img src="image/3.jpg"></a></li>
  <li><a href="#"><img src="image/4.jpg"></a></li>
 </ul>

 <ul class="num">
 </ul>
 <div class="btn btn_l"><</div>
 <div class="btn btn_r">></div>
</div>

jq代码

$(function(){
 var i=0;
 var clone=$(".banner .img li").first().clone();
 $(".banner .img").append(clone);
 var size = $(".banner .img li").size();
 for(var j=0;j<size-1;j++){
  $(".banner .num").append("<li></li>");
 }
 $(".banner .num li").first().addClass('on');
 //鼠标划入圆点
 $(".banner .num li").hover(function(){
  var index=$(this).index();
  i=index;
  $(".banner .img").stop().animate({left:-index*1000},500);
  $(this).addClass('on').siblings().removeClass('on');
 })

 /*自动轮播*/
 var t=setInterval(function(){
  i++;
  move();
 },2000);

 //对banner定时器的操作
 $(".banner").hover(function(){
  clearInterval(t);
 },function(){
  t=setInterval(move,2000);
 })


 /*向左按钮*/
 $(".banner .btn_l").click(function(){
  i++;
  move();
 })
 /*向右按钮*/
 $(".banner .btn_r").click(function(){
  i--;
  move();
 })

 function move(){
  if(i==size){
   $(".banner .img").css({left:0});
   i=1;
  }
  if(i==-1){
   $(".banner .img").css({left:-(size-1)*1000});
   i=size-2;
  }

  $(".banner .img").stop().animate({left:-i*1000},500);

  if(i==size-1){
   $(".banner .num li").eq(0).addClass('on').siblings().removeClass('on');
  }else{
   $(".banner .num li").eq(i).addClass('on').siblings().removeClass('on');
  }
 }
})

style 样式

<style>
*{padding:0;margin:0;list-style: none;}
.banner{
 margin:100px auto; 
 border:5px solid #000; 
 width:1000px;
 height:640px;
 position: relative;
 overflow: hidden;
}
.banner .img{
 width:5000px;
 position: absolute;
 left:0px;
 top:0px;

}
.banner .img li{
 float:left;
}
.banner .num{
 position:absolute;
 width:100%;
 bottom:20px;
 left:0px;
 text-align: center;
 font-size: 0px;
}
.banner .num li{
 width:10px;
 height:10px;
 background: #888;
 border-radius: 50%;
 display: inline-block;
 margin:0 3px;
 cursor: pointer;

}
.banner .num li.on{
 background: #f00;
}
.banner .btn{
 width:30px;
 height:50px;
 background: rgba(0,0,0,0.5);
 position:absolute;
 top:50%;
 margin-top:-25px;
 cursor: pointer;
 text-align: center;
 line-height: 50px;
 color:#fff;
 font-size: 40px;
 font-family: "宋体";
 display: none;
}
.banner:hover .btn{
 display: block;
}
.banner .btn_l{
 left:0px;
}
.banner .btn_r{
 right:0px;
}
</style>

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

Javascript 相关文章推荐
javascript 数组学习资料收集
Apr 11 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
vue实现路由切换改变title功能
May 28 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
jQuery实现两列等高并自适应高度
Dec 22 #Javascript
JS常用加密编码与算法实例总结
Dec 22 #Javascript
Javascript 制作图形验证码实例详解
Dec 22 #Javascript
jquery中用函数来设置css样式
Dec 22 #Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 #Javascript
js数组去重的hash方法
Dec 22 #Javascript
JavaScript生成.xls文件的代码
Dec 22 #Javascript
You might like
Access数据库导入Mysql的方法之一
2006/10/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
python中模块查找的原理与方法详解
2017/08/11 Python
python re模块findall()函数实例解析
2018/01/19 Python
python多维数组切片方法
2018/04/13 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
教师实习自我鉴定
2013/12/18 职场文书
诚信考试承诺书
2014/03/27 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
给上级领导的感谢信
2015/01/22 职场文书