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 封装Ajax传递的数据代码
Jun 05 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
四十九个javascript小知识实用技巧
Nov 20 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 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
Python Web框架Tornado运行和部署
2020/10/19 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python中怎么表示空值
2020/06/19 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
高中体育教学反思
2014/01/24 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
愚人节活动策划方案
2014/03/11 职场文书
工程款申请报告
2015/05/15 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python