jquery左右切换的无缝滚动轮播图
1.HTML结构：
<head>
<script type="text/javascript" src="../jquery-1.8.3/jquery.js"></script>
</head>
<body>
<div class="banner">
<ul class="img">
<li><a href=""><img src="img/01.jpg" alt="1"></a>
<li><a href=""><img src="img/02.jpg" alt="2"></a>
<li><a href=""><img src="img/03.jpg" alt="3"></a>
<li><a href=""><img src="img/04.jpg" alt="4"></a>
</ul>
<ul class="num"></ul>
<div class="btn btn_left"><</div>
<div class="btn btn_right">></div>
</div>
</body>
2.css样式：
*{margin:;padding:;list-style: none;}
.banner{margin:100px auto;border:5px solid #000;width:690px;height:690px;overflow: hidden;
position:relative;}
.banner .img{width:5000px;position: absolute;left:;top:;}
.banner .img li{float:left;}
.banner .num{position: absolute;width:100%;bottom:10px;left:;font-size:;text-align: center;}
.banner .num li{width:10px;height:10px;background-color:#888;border-radius: 50%;
display: inline-block;margin:0px 3px;cursor: pointer;}
.banner .num li.on{background-color:#f60;}
.banner .btn{width:50px;height:60px;background:rgba(0,0,0,0.5);position:absolute;top:50%;margin-top:-25px;
font-size:40px;line-height:50px;text-align: center;color:#fff;font-family: "宋体";}
.banner .btn_left{left:;}
.banner .btn_right{right:;}
3.jQuery结构：
$(function(){ var i=0;
//将第一张复制
var clone=$(".banner .img li").first().clone();
//然后粘贴
$(".banner .img").append(clone);
//size()被length取代
var size=$(".banner .img li").length;
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*690},500)
$(this).addClass("on").siblings().removeClass("on");
})
//自动轮播
var t=setInterval(
moverl,2000)
//鼠标移入定时器被关闭
$(".banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(moverl,2000)
})
//向左的按钮点击事件
$(".banner .btn_left").click(function(){
moverl();
})
//封装函数
function moverl(){
i++;
if(i==size){
$(".banner .img").css({left:});
i=1;
}
$(".banner .img").stop().animate({left:-i*690},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");
}
}
$(".banner .btn_right").click(function(){
moverr();
})
function moverr(){
i--;
if(i==-1){
//索引从0开始
$(".banner .img").css({left:-(size-1)*690});
i=size-2;
}
$(".banner .img").stop().animate({left:-i*690},500)
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
}
})
jquery左右切换的无缝滚动轮播图的更多相关文章
- js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
- js原生选项卡（包含无缝滚动轮播图）一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- iOS swift版本无限滚动轮播图
之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...
- JS---案例：无缝的轮播图
案例:无缝的轮播图 w <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...
- 原生无缝Banner轮播图
话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...
- JQuery手写一个简单的轮播图
做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...
- 用jQuery实现简单的简单的轮播图
图片来源 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
随机推荐
- AngularJS4.0环境搭建详解--windows系统环境
第一步:安装NodeJS 下载最新版的NodeJS并安装,安装完成后打开CMD命令行,输入以下命令: node -v 若返回类似版本号则代表NodeJS安装成功,如下: 第二部 安装npm 新版的No ...
- 一款好用的绘图软件gnuplot
漂亮的图片在一篇报告中是必不可少的.这里推荐一款绘图软件Gnuplot. Gnuplot是一种免费分发的绘图工具,可以移植到各种主流平台,无论是在Linux还是在Windows都易于安装使用.最新的版 ...
- (转)Java对象克隆（Clone）及Cloneable接口、Serializable接口的深入探讨
原文地址:http://blog.csdn.net/kenthong/article/details/5758884 Part I 没啥好说的,直接开始Part II吧. Part II 谈到了对象的 ...
- mysql基础篇-----mysql简介
2017-04-19 一.mysql简介 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 ...
- Mac之OS系统下搭建JavaEE环境 <三> 之Eclipse 与 IntelliJ IDEA 的安装配置
三.Eclipse 与 IntelliJ IDEA 的安装配置 1.Eclipse的安装配置 1 下载eclipse 到官网 https://www.eclipse.org/downloads/ecl ...
- 最小生成树之Prim算法和Kruskal算法
最小生成树算法 一个连通图可能有多棵生成树,而最小生成树是一副连通加权无向图中一颗权值最小的生成树,它可以根据Prim算法和Kruskal算法得出,这两个算法分别从点和边的角度来解决. Prim算法 ...
- Python中的元类(metaclass)
推荐+收藏:深刻理解Python中的元类(metaclass) 做一些笔记学习学习: 在大多数编程语言中,类就是用来描述如何生成一个对象的代码段,在Python中类也是一个对象,这个(类)对象自身拥有 ...
- nodejs之url模块
鄙人初步学习nodejs,目前在读<nodejs入门>这一本书,书很小,但是让我知道了如何用nodejs创建一个简单的小项目.例如如何创建一个服务器啦,例如http.createServe ...
- angularjs初窥门径
貌似angularjs出来之后网上各种夸angularjs的好黑jquery. angularjs大致可以分为几个板块:作用域,控制器,指令(主要),路由,依赖注入. 1 作用域 作用域在angula ...
- Android - 使用Volley请求网络数据
Android - 使用Volley请求网络数据 Android L : Android Studio 14 个人使用volley的小记,简述使用方法,不涉及volley源码 准备工作 导入Volle ...