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 EasyPager 分页函数
May 25 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 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
php4的session功能评述(二)
2006/10/09 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
python操作redis方法总结
2018/06/06 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Python连接Impala实现步骤解析
2020/08/04 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
办公室秘书岗位职责范本
2014/02/11 职场文书
体育专业求职信
2014/07/16 职场文书
建筑管理专业求职信
2014/07/28 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书