移动滑块效果

$(document).ready(function () {

            var img_now = 0;

            var img_count = 3;//图片数量

            var t = setInterval("$('#Button2').click()", 3000);//自动移动

            $("#Button1").click(function () {//左移

                img_now = (img_now + img_count - 1) % img_count;

                moveto(img_now);

            });

            $("#Button2").click(function () {//右移

                img_now = (img_now + 1) % img_count;

                moveto(img_now);

            });

            $("#div_outer").mouseenter(function () {

                $("#div_controls").fadeIn();

                clearInterval(t);//清除定时器

            });

            $("#div_outer").mouseleave(function () {

                $("#div_controls").fadeOut();

                t = setInterval("$('#Button2').click()", 3000);//重启定时器

            });

        })

        function moveto(i) {

            var _left = -(i * 590);

            $("#div_innerMove").animate({ "opacity": 0.3 }, 500);

            $("#div_innerMove").animate({ "left": _left });//div左移

            $("#div_innerMove").animate({ "opacity": 1 }, 500);

        }

#div_innerMove {

            width: 1800px;

            position: relative;

        }

        #div_outer {

            width: 590px;

            height: 470px;

            margin: 10px auto;

            border: 1px solid green;

            overflow: hidden; /*超出范围部分不显示*/

        }

        #Button1 {

            float: left;

        }

        #Button2 {

            float: right;

        }

        #div_controls {

            position: relative;

            top: -240px; /*相对位置向上移动*/

            display: none;

        }


你可能感兴趣的:(移动滑块效果)