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 ...

随机推荐

在控制台进行依赖注入（DI in Console）
首先我们准备两个服务接口 public interface IServiceA { void showConsole(); int GetValue(int val); } public interf ...
ubunt tftp服务器搭建
默认安装的Ubuntu系统没有包含TFTP的服务端和客户端,可以通过命令行来下载安装,步骤如下: (1)安装客户端. root@ www.linuxidc.com:~# apt-get install ...
Nginx防盗链配置案例配置,Nginx的知识分享
防盗链的含义:网站内容不在自己服务器上,而通过技术手段,绕过别人放广告有利益的最终页,直接在自己的有广告有利益的页面上向最终用户提供此内容. 常常是一些名不见经传的小网站来盗取一些有实力的大网站的地址 ...
TKCPP
volume one: http://book.huihoo.com/thinking-in-cpp-2nd-ed-vol-one/ volume2 : http://book.huihoo.com/ ...
免费 Https 证书（Let's Encrypt）申请与配置
之前要申请免费的 https 证书操作步骤相当麻烦,今天看到有人在讨论,就搜索了一下.发现现在申请步骤简单多了. 1. 下载 certbot git clone https://github.com/ ...
在Linux/Centos下用wondershaper限速
wondershaper是国外人开发的一款在Linux内核下基于TC工具的对整块网卡的限度工具,虽然有很久没有更新了,但是测试老版本在Centos6.3上依然可以使用. 首先下载wondershape ...
安装kvm模块配置网络
1. vmware安装centos6.6 64位 (略) 其中有几个注意的地方:a. 内存给2gb. 磁盘给50g, 或者再单独分一个磁盘,用来存储虚拟机文件c. 最关键的一步,在创建虚拟机时,cpu ...
MySQL数据库基础（一）（启动/停止、登录/退出、语法规范及最基础操作）
1.启动/停止MySQL服务启动:net start mysql 停止:net stop mysql 2.MySQL登录/退出登录:mysql 参数:如果连接的是本地服务器,一般用命令:my ...
C#仪器数据文件解析-PDF文件
不少仪器工作站输出的数据报告文件为PDF格式,PDF格式用于排版打印,但不易于数据解析,因此解析PDF数据需要首先读取到PDF文件中的文本内容,然后根据内容规则解析有意义的数据信息. C#解析PDF文 ...
JVM中对象访问定位两种方式
1.通过句柄方式访问, 在Java堆中分出一块内存进行存储句柄池,这样的话,在栈中存储的是句柄的地址优点: 当对象移动的时候(垃圾回收的时候移动很普遍),这样值需要改变句柄中的指针,但是栈中的指针不 ...

banner图片轮播

banner图片轮播的更多相关文章

随机推荐

热门专题