正文
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>
