JQUERY写大图轮播;附jquery的hover()方法、animate()方法、find()方法
思想:黑框设置超出部分隐藏。
红框往左移动,通过判断红框左边框距离黑框左边框的像素值,来实现红框的移动。
绿框在最上层,放每张图片的说明和序号。
一:html部分(大框、图片部分、箭头部分、图片介绍部分、图片序号部分)
<div id="lunbo"><!--1轮播部分--> <ul class="imglist"><!--2图片部分--> <li><img src="image/datu1.jpg"/></li> <li><img src="image/datu2.jpg"/></li> <li><img src="image/datu3.jpg"/></li> </ul> <img src="image/360截图20170227102950953.png" id="prev"/><!--3箭头图标--> <img src="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: 10;} .imglist li{float: left;display: inline;}/*display:inline;是把元素设为块级元素,在一行内显示*/把每张图设为块级元素,并往左流
箭头部分:比图片的层要高一点
#prev{position:relative;z-index: 20;top: -280px;left: 10px;} #next{position:relative;z-index: 20;top: -280px;right: 10px;float:right;}
图片部分介绍:比箭头的层数高
.infolist{position: relative;z-index: 30;top: -180px;left: 10px;} .infolist li{display: none;}/*让所有介绍都先隐藏*/ .infolist .infoon{display: inline;color: black;}/*设置一个样式,用js控制,哪个选中,给哪个加上这个样式*/
图片序号部分:
.indexlist{position: relative;z-index: 30;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>