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 ...
随机推荐
- ThinkPHP删除栏目（多）
前段时间发表了一个删除栏目的随笔,当时实现的功能是删除一条信息,这次来实现一下批量删除栏目. 我们需要达到的是这样一个效果: 选中批量删除按钮后可以选中所有该页面的栏目,这个是前端页面的实现,在这里就 ...
- LeetCode - 728. Self Dividing Numbers
A self-dividing number is a number that is divisible by every digit it contains. For example, 128 is ...
- NGUI的新手引导的实现
先声明一下,UNITY新手,如果说的有不对的地方,欢迎各位大神指正. 最近在项目需要实现新手引导,最基础的需求就是需要一个带黑色遮罩的引导UI,类似下图这种: 对,就是这么敷衍的UI,因为是我随手做的 ...
- nginx虚拟域名的配置以及测试验证
1.保证该机器上安装了nginx 未安装请看:centos/linux下的安装Nginx 2.使用root用户编辑配置文件 vim /usr/local/nginx/conf/nginx.conf 3 ...
- Maven json包找不到解决办法
在Maven中央仓库找到Maven的jar <dependency> <groupId>net.sf.json-lib</groupId> <artifact ...
- LNK2026 模块对于 SAFESEH 映像是不安全的
解决方法如下: 配置属性 -> 链接器 -> 命令行 位置添加如下内容: /SAFESEH:NO
- [Note] 计算机网络的应用层
应用层 原理 结构和模型 客户-服务器体系结构(client-server architecture ) 通信不是直接的,需要通过服务器转发 经常会在服务器积压大量的负载 服务器(server) 服务 ...
- R语言数据框中，用0替代NA缺失值
1.用0替代数据框中的缺失值NA 生成数据框: > m <- matrix(sample(c(NA, :), , replace = TRUE), ) > d <- as.da ...
- Java中的Lock与synchronized
并发编程学习笔记之Lock与synchronized 一.什么是可重入锁 Lcok在Java中是一个接口,一般在面试问题中问到的可能是ReentrantLock与synchronized的区别.Ree ...
- 如何进行系统配置 ——了解DOS下的内存
DOS操作系统最早设计时,PC机的硬件系统只支持1M字节的寻址空间,所以DOS只能管理最多1M字节的连续内存空间.在这1M内存中,又只有640K被留给应用程序使用,它们被称为常规内存或基本内存,其它3 ...