banner图片轮播
html部分 版本号 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
-----------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* { padding: 0; margin: 0; list-style: none; }
/********************************************/
.banner { width: 1920px; height: 500px; overflow: hidden; position: relative; margin-left: auto; margin-right: auto; }
.banner .img {position: absolute; left: 0px; top: 0; } /*图片样式*/
.banner .img li { float: left; } /*图片样式*/
.banner .img img { width: 550px; }
/*/ 小圆圈 /*/
.banner .num { position: absolute; width: 100%; bottom: 50px; left: 0; text-align: center; font-size: 0px;; }/*bottom 可以调整小圈圈高度 */
.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: #F60; }
/*/ 按钮 /*/
.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: 0; }
.banner .btn_r { right: 0; }
/* 修改输出屏大小 */
#ban1 .banner { width: 100%px; height:600px; margin: 0 auto; border: 0px solid #000; }
#ban1 .banner .img img { width: 1920px; height: 600px; /* 修改图片大小 */
</style>
</head>
<body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="../gundongimages/js/gdlb.js"></script>
<div id="ban1">
<div class="banner">
<ul class="img">
<li><a href="#"><img src="..。。。。。。。。。。。。。。"></a></li>
<li><a href="#"><img src="。。。。。。。。。。。。。。。。。"></a></li> /* 图片路径根据自己的图片路径填写 */
</ul>
<ul class="num"> <!--小圆圈-->
</ul>
<div class="btn btn_l"><</div> <!--左按钮 -->
<div class="btn btn_r">></div> <!--右按钮 -->
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
js部分
----------------------------------------------------------------------------------------------
$(function(){
imgscrool('#ban1');
imgscrool('#ban2');
})
//这是函数
function imgscrool(obj){
var moving = false;
var width = $(obj+" .banner .img img").width();
var i=0;
var clone=$(obj+" .banner .img li").first().clone();
$(obj+" .banner .img").append(clone);
var size=$(obj+" .banner .img li").size();
for(var j=0;j<size-1;j++){
$(obj+" .banner .num").append("<li></li>");
}
$(obj+" .banner .num li").first().addClass("on");
/*鼠标划入圆点*/
if ($(obj+" .banner .num li")) {
$(obj+" .banner .num li").hover(function(){
var index=$(this).index();
i=index;
$(obj+" .banner .img").stop().animate({left:-index*width},1000)
$(this).addClass("on").siblings().removeClass("on")
})
};
//处理轮播初始宽度问题
var a2= $(obj+" .banner img").width();
var a3= $(obj+" .img li").length
$(obj+" .banner .img").width(a2*a3+'px');
/*自动轮播*/
var t=setInterval(function(){
i++;
move();
},2000)
/*对banner定时器的操作*/
$(obj+" .banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move();
},2000)
})
if ($(obj+" .banner .btn_l")) {
/*向左的按钮*/
$(obj+" .banner .btn_l").stop(true).click(function(){
if(moving){
return;
};
moving=true;
i--
move();
})
/*向右的按钮*/
$(obj+" .banner .btn_r").stop(true).click(function(){
if(moving){
return;
}
moving=true;
i++
move()
})
};
function move(){
if(i==size){
$(obj+" .banner .img").css({left:0})
i=1;
}
// 修改轮播每屏宽度
if(i==-1){
$(obj+" .banner .img").css({left:-(size-1)*width})
i=size-2;
}
$(obj+" .banner .img").stop(true).delay(200).animate({left:-i*width},1000,function(){
moving = false;
})
if(i==size-1){
$(obj+" .banner .num li").eq(0).addClass("on").siblings().removeClass("on")
}else{
$(obj+" .banner .num li").eq(i).addClass("on").siblings().removeClass("on")
}
}
}
banner图片轮播的更多相关文章
- 安卓banner图片轮播
之前写过一篇关于首页图片广告轮播的demo:http://blog.csdn.net/baiyuliang2013/article/details/45740091,不过图片轮播的指示器(小白点)处操 ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- 网站banner无缝轮播
网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 图片轮播图插件的使用 unslider！！！
1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...
- 使用FlaycoBanner实现图片轮播效果（加载网络图片）
FlaycoBanner是一个开源图片轮播框架,支持android2.2及以上: git地址:https://github.com/H07000223/FlycoBanner_Master 在andr ...
- jquery图片轮播效果(unslider)
今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- 图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
随机推荐
- 用 label 控制 Pod 的位置 - 每天5分钟玩转 Docker 容器技术（128）
默认配置下,Scheduler 会将 Pod 调度到所有可用的 Node.不过有些情况我们希望将 Pod 部署到指定的 Node,比如将有大量磁盘 I/O 的 Pod 部署到配置了 SSD 的 Nod ...
- 较复杂makefile跟lds脚本程序的编写
首先看个makefile范例: /*指明工具链,并为其取个简单的别名*/ CC = arm-linux-gcc LD = arm-linux-ld AR = arm-linux-ar OBJCOPY ...
- shell编程之运算符（3）
declare声明变量类型 declare[+/-][选项]变量名 选项: - : 给变量设定类型属性 + : 取消变量的类型属性 -a : 将变量声明为数组型 -i : 将变量声明为整数型(inte ...
- [Swift]UIKit学习之警告框:UIAlertController和UIAlertView
Important: UIAlertView is deprecated in iOS 8. (Note that UIAlertViewDelegate is also deprecated.) T ...
- 查看Zookeeper服务器状态信息的一些命令
1.Zookeeper服务器当前节点配置信息: echo conf|nc localhost 2181 2.cons:echo cons|nc localhost 2181 输出当前服务器所有客户端连 ...
- mysql5.7中解决中文乱码的问题
在使用mysql5.7时,会发现通过web端向数据库中写入中文后会出现乱码,但是在数据库中直接操作SQL语句插入数据后中文就显示正常,这个问题怎么解决呢?此处不对mysql的数据编码过程和原理进行讲解 ...
- 轻松搭建Git服务器(Ubuntu)
搭建Git服务器 在远程仓库节中,我们讲了远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改. GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业 ...
- java 集合类Array、List、Map区别和优缺点
Java集合类主要分为以下三类: 第一类:Array.Arrays 第二类:Collection :List.Set第三类:Map :HashMap.HashTable 一.Array , Array ...
- 简单的GIT上传
简单的GIT上传 上传项目时先新建一个 文件夹 mkdir test 然后在切换到test文件夹中然后把github 中的项目拷贝下来 git glone url 然后git init 查看文件 然后 ...
- cronatab周期性任务
要执行周期性任务,要保证服务运行.服务名为crond:service crond start ; systemctl start crond; 配置文件 /etc/crontab cron的日志文件 ...