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>

 

转载于:https://www.cnblogs.com/xingyue1988/p/6489861.html