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 ...
随机推荐
- Oracle11G 在线重定义
create tablespace tbs1 datafile '/opt/oracle/oradata/haier/tbs1.dbf' size 500m autoextend on maxsize ...
- JSP EL表达式 获得 request的GET/POST方法
JSP EL表达式 获得 request的GET/POST方法: 不在requestScopse中: <p>得到request的方法</p> <p>pageCont ...
- spring mvc rest 方式
handler中编写方式: @RequestMapping("/{userName}/ajaxUser3.do") @ResponseBody public UserInfo aj ...
- Oracle to_char格式化函数 显示毫秒
racle如何显示毫秒 date类型只能精确到秒,要想精确到毫秒,需要使用timestamp类型. 应用举例: 举例1: select to_char(systimestamp,'yy ...
- 如何在NodeJS项目中优雅的使用ES6
如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性.只是在使用的时候需要在node后面加 ...
- KB奇遇记(4):困难重重的选型
在以往的工作经历中,虽然也会出现公司的一些规章制度,但我鲜少与其打交道,也极少听说.但是来KB这里,突然发现公司居然并没有给我配备电脑!!原因是制度上并没有写IT人员入职需要配备电脑,尔后通过特批流程 ...
- Wireshark网络抓包(一)——数据包、着色规则和提示
一.数据包详细信息 Packet Details面板内容如下,主要用于分析封包的详细信息. 帧:物理层.链路层 包:网络层 段:传输层.应用层 1)Frame 物理层数据帧概况 2)Ethernet ...
- ubuntu服务器远程连接xshell,putty,xftp的简单使用教程
当你自己千辛万苦终于搞到一个服务器(ubuntu(linux)系统的)之后,却不知道怎么进行时,xshell,putty,xftp是个很不错的选择 xshell和xftp是win下访问ubuntu(l ...
- Ubuntu 制作U盘启动盘
部门需要一台Linux系统远程共享服务器,需要一个启动盘安装.但是由于公司windows 系统都安装了保安软件,而且软件的使用也是有限制的.所以不能使用UltraISO 这类软件制作U盘启动盘.还好部 ...
- getstyle() 获取样式
问题:在js动画中,如果元素设置了border,padding等,获取到的样式是盒子的样式,这样会影响动画的正常显示. 解决方案一:在元素的行内添加样式 如 <div style=" ...