jquery实现简单的轮播动画

阳光穿透心脏的1/2处 2022-09-30 15:00 173阅读 0赞

## css ##

* { margin: 0; padding: 0; }
                ul { list-style: none; }           
                .slideShow { width: 620px; height: 700px; /*其实就是图片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/ }           
                .slideShow ul { width: 2500px; position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/ }           
                .slideShow ul li { float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/ width: 620px; }           
                .slideShow .showNav { /*用绝对定位给数字按钮进行布局*/ position: absolute; right: 10px; bottom: 5px; text-align: center; font-size: 12px; line-height: 20px; }   
                .slideShow .showNav span { cursor: pointer; display: block; float: left; width: 20px; height: 20px; background: #ff5a28; margin-left: 2px; color: #fff; }           
                .slideShow .showNav .active { background: #b63e1a; }

## html ##

## js ##

$(document).ready(function() { 
                var slideShow = $(".slideShow"), //获取最外层框架的名称 
                ul = slideShow.find("ul"),
                showNumber = slideShow.find(".showNav span"), //获取按钮 
                oneWidth = slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度 
                var timer = null; //定时器返回值，主要用于关闭定时器 
                var iNow = 0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0 
                showNumber.on("click", function() {  //为每个按钮绑定一个点击事件 
                $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉 
                var index = $(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值 
                iNow = index;
                ul.animate({
                    "left": -oneWidth * iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定 
                    })
                });
    
                function autoplay() { 
                    timer = setInterval(function() {  //打开定时器 
                    iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片 
                    if(iNow > showNumber.length - 1) { //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始 
                            iNow = 0;
                        }
                        showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click 
                    }, 2000); //2000为轮播的时间 
                }
                autoplay();
                slideShow.hover(function() { 
                    clearInterval(timer);
                }, autoplay);
            })