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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
Javascript中的常见排序算法
Mar 27 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 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
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python字符串连接的N种方式总结
2014/09/17 Python
浅谈python中get pass用法
2019/03/19 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
华润集团网上药店:健一网
2016/09/19 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
招商引资工作汇报
2014/10/28 职场文书
好媳妇事迹材料
2014/12/24 职场文书
公司员工培训管理制度
2015/08/04 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android