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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
Javascript动画效果(2)
Oct 11 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
微信小程序实现点击效果
Jun 21 Javascript
JS 事件机制完整示例分析
Jan 15 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
一周学会PHP(视频)Http下载
2006/12/12 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
实时获取Python的print输出流方法
2019/01/07 Python
手写一个python迭代器过程详解
2019/08/27 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
护士自我评价范文
2014/01/25 职场文书
初一学生评语大全
2014/04/24 职场文书
活动总结新闻稿
2014/08/30 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript