移动滑块效果

$(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;

        }


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容