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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
微信小程序实现简单表格
Feb 14 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
关于element的表单组件整理笔记
Feb 05 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
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
php简单统计中文个数的方法
2016/09/30 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
python如何实现代码检查
2019/06/28 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
展会邀请函范文
2014/01/26 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
社区植树节活动总结
2015/02/06 职场文书
中秋节随笔
2015/08/15 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android