JQUERY写大图轮播;附jquery的hover()方法、animate()方法、find()方法
思想:黑框设置超出部分隐藏。
红框往左移动,通过判断红框左边框距离黑框左边框的像素值,来实现红框的移动。
绿框在最上层,放每张图片的说明和序号。
一:html部分(大框、图片部分、箭头部分、图片介绍部分、图片序号部分)
<div id="lunbo"><!--1轮播部分-->
<ul class="imglist"><!--2图片部分-->
<li><img src="data:image/datu1.jpg"/></li>
<li><img src="data:image/datu2.jpg"/></li>
<li><img src="data:image/datu3.jpg"/></li>
</ul> <img src="data:image/360截图20170227102950953.png" id="prev"/><!--3箭头图标-->
<img src="data:image/360截图20170227103041047.png" id="next"/> <ul class="infolist"><!--4图片介绍部分-->
<li class="infoon">111111</li>
<li>222222</li>
<li>333333</li>
</ul> <ul class="indexlist"><!--5图片序号-->
<li class="indexon">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
二:样式表设置
大框部分
#lunbo{position: relative;width: 1320px;height: 426px;overflow: hidden;}
图片部分:宽度的设置是几张图加起来的总宽度,并设层
.imglist{position: relative;width: 4000px;height: 426px;overflow: hidden;z-index:;}
.imglist li{float: left;display: inline;}/*display:inline;是把元素设为块级元素,在一行内显示*/把每张图设为块级元素,并往左流
箭头部分:比图片的层要高一点
#prev{position:relative;z-index:;top: -280px;left: 10px;}
#next{position:relative;z-index:;top: -280px;right: 10px;float:right;}
图片部分介绍:比箭头的层数高
.infolist{position: relative;z-index:;top: -180px;left: 10px;}
.infolist li{display: none;}/*让所有介绍都先隐藏*/
.infolist .infoon{display: inline;color: black;}/*设置一个样式,用js控制,哪个选中,给哪个加上这个样式*/
图片序号部分:
.indexlist{position: relative;z-index:;top: -180px;right: 10px;float: right;}
.indexlist li{float: left;margin-right: 5px;padding:2px 4px;border: 2px solid black;background-color: grey;cursor:pointer;list-style:none;}
.indexlist .indexon{background-color: red;color: white;font-weight: bold;}/*设置一个样式,用js控制,哪个图片选中,给哪个加上这个样式*/
三:jquery部分
思想:定义一个变量,贯穿js的始终,初始curindex=0;
定义两个方法:1.changeto()方法:移动整个图片容器、给选中的图片加infoon和indexon样式
2.autuochange()方法:重新启用定时器
取图片的个数;
定义一个定时器,通过判断变量curindex与图片个数-1比较的值,给curindex赋新值,再调用changeto()方法;
定义鼠标划入划出与点击事件:划入清除定时器,划出重新启用定时器;点击:判断curindex的值,相应的加减1;
1.$().hover(function(){鼠标移上时执行的代码},function(){鼠标移开时之行动的代码});
2.$().animate({参数1,参数2});
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
参数1:是样式,例如:$(".imglist").animate({left:"-"+1000+"px"});
参数2:可选。规定动画的速度。默认是 "normal"。
3.$().find();例如:$("p").find("span")
.css('color','red');搜索所有p标签中的后代 span 元素,并将其颜色设置为红色;
<script type="text/javascript">
var curindex=0;
imglen=$(".imglist li").length; var autochange=setInterval(function(){
if(curindex<imglen-1)
{
curindex++;
}else
{
curindex=0;
}
changeto(curindex);
},2500); /*左箭头划入划出效果*/
/*划入划出*/
$("#prev").hover(function(){
clearInterval(autochange);
},function(){
autochangeagain();
});
/*点击*/
$("#prev").click(function(){
curindex=(curindex>0)?(curindex-1):(imglen-1);
changeto(curindex);
}) /*右箭头划入划出效果*/
/*划入划出*/
$("#next").hover(function(){
clearInterval(autochange);
},function(){
autochangeagain();
});
/*点击*/
$("#next").click(function(){
curindex=(curindex<imglen-1)?(curindex+1):0;
changeto(curindex);
}) function changeto(n)
{
var goleft=n*1440;
$(".imglist").animate({left:"-"+goleft+"px"});
$(".infolist").find("li").removeClass("infoon");
$(".infolist").find("li").eq(n).addClass("infoon");
$(".indexlist").find("li").removeClass("indexon");
$(".indexlist").find("li").eq(n).addClass("indexon"); } function antuochangeagain()
{
autochange=setInterval(function(){
if(curindex<imglen-1)
{
curindex++;
}else
{
curindex=0;
}
changeto(curindex);
},2500);
}
</script>
JQUERY写大图轮播;附jquery的hover()方法、animate()方法、find()方法的更多相关文章
- 用jQuery写的轮播图
效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...
- jQuery实现大图轮播
css样式: *{ margin: 0; padding: 0;}ul{ list-style:none;}.slideShow{ width: 620px; heigh ...
- 记录一下自己用jQuery写的轮播图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- jquery实现导航图轮播
版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- 自适应图片宽度的jQuery焦点幻灯轮播代码
自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示 XML/HTML Code <div id="sli ...
随机推荐
- linx建立用戶&組
groupadd test 创建test用户组 useradd user1 创建user1用户 passwd user1 ...
- 升级wamp5集成安装包 php5.2到php5.3
平时xp下面都使用wamp5集成开发 但php的空间命名需要php5.3 才支持,而且公司系统大部分都使用5.3,很多函数与5.2是不同的 难的在xp下面手动安装,集成包使用很方便,配置,快捷键都很不 ...
- xshell安装运行时提示缺少mfc110.dll
下载最新的mfc110.dll文件 https://pan.baidu.com/share/link?shareid=1932421734&uk=1784696518&app=zd 之 ...
- IOS开发缓存机制之—本地缓存机制
功能需求 这个缓存机制满足下面这些功能. 1.可以将数据缓存到本地磁盘. 2.可以判断一个资源是否已经被缓存.如果已经被缓存,在请求相同的资源,先到本地磁盘搜索. 3.可以判断文件缓存什么时候过期.这 ...
- Java 页面的工具包
所谓工具包,是指把页面的功能划分出来,放到另外一个包里面.方面工程管理.结构清晰.团队协作等. 根据原来的例子:要做一个com.myweb包的工具包com.myweb.tool 为导航栏统一创建接口 ...
- 第一部分 代码组织概念,集成开发环境(IDE)
代码组织概念 主要是代码文件,项目和解决方案. 解决方案(.sln)包含多个项目(.csproj),一个项目又包含多个文件(.cs). 集成开发环境(IDE): 由编辑.编译.调试,以及用户图形界面, ...
- webview 设置编码
WebSettings settings = webView.getSettings(); // 设置页面编码 settings.setDefaultTextEncodingName("ut ...
- js连接sqlserver进行查询
<script language="JavaScript"> // 创建数据库对象 var objdbConn = new ActiveXObject("AD ...
- python关于列表的操作
列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表的数据项不需要具有相同的类型.列表中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类 ...
- Qt入门之基础篇(1):Qt4及Qt5的下载与安装
转载请注明出处:CN_Simo. 导语: Qt是一个跨平台的C++图形界面应用程序框架.它提供给开发者建立图形用户界面所需的功能,广泛用于开发GUI程序,也可用于开发非GUI程序.Qt很容易扩展,并且 ...