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 ...
随机推荐
- FileBeat安装配置
在ELK中因为logstash是在jvm上跑的,资源消耗比较大,对机器的要求比较高.而Filebeat是一个轻量级的logstash-forwarder,在服务器上安装后,Filebeat可以监控日志 ...
- iconfont 怎么在项目中使用图标库
iconfont是很多设计以及前后端人员编写页面时经常用到的网站,阿里不仅为我们提供了免费的图标库,并且有一套完整的图标库体系.很多初学者只知道从图标库中下载图标放入项目中,但在实际项目应用中,过多的 ...
- Selenium_Java版本安装及初试
[环境] ①JDK版本:jdk1.8.0_73 ②Eclipse:jee-mars-4.5.2 ③Selenium:selenium-java-3.5.3 ④GoogleChrome:60 ⑤chro ...
- Maven文件配置
Maven文件路径的配置 默认设置 修改之后的设置 Maven文件内容的配置 对于Maven 的 settings.xml 文件,需要注意. <mirror>镜像元素之间是互斥的,优先级是 ...
- 【HTTP协议】---TCP三次握手和四次挥手
TCP三次握手和四次挥手 首先我们知道HTTP协议通常承载于TCP协议之上,HTTPS承载于TLS或SSL协议层之上 通过上面这张图我们能够知道. 在Http工作之前,Web浏览器通过网络和W ...
- 浅谈PHP答题卡识别（一）
最近期末考试考完了,我们也要放寒假了.于是突发奇想,想用PHP写一个答题卡识别程序.已经实现了一些,现分享给大家. 具体的步骤如下: 上传答题卡=>图片二值化(已实现)=>寻找定位点(已实 ...
- 【学习笔记】Spring中的BeanFactory和ApplicationContext 以及 Bean的生命周期（Y2-3-2）
BeanFactory和ApplicationContext Spring的IoC容器就是一个实现了BeanFactory接口的可实例化类. Spring提供了两种不同的容器: 一种是最基本的Bean ...
- 解决react-router4在browserhistory路由下的nginx的白屏或者404问题
使用react-router,官方推荐用browserhistory,美观简洁.但是nginx服务器端的配置也让人头疼. 首先看官方举例的方法: server { location / { try_f ...
- js闭包面试题目
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Mysql给某一台主机授权访问，修改root密码
ubuntu上用的是phpstudy,安装好之后,敲mysql,提示没有,需要安装mysql的客户端. 安装好之后直接敲mysql,敲 mysql 再敲use mysql 再敲mysql -uroot ...