jquery图片带左右按钮切换特效

最新推荐文章于 2020-11-16 11:11:20 发布

q86435810

最新推荐文章于 2020-11-16 11:11:20 发布

阅读量387

点赞数

分类专栏： web前端文章标签： JQuery ViewUI

本文链接：https://blog.csdn.net/q86435810/article/details/84244847

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<style type="text/css">
        /*70px是图像和按钮的高度*/*
        {
            margin: 0;
            padding: 0;
        }
        ul
        {
            list-style: none;
        }
        ul li
        {
            margin-left: 10px;
            margin-right: 10px;
            float: left;
        }
        #imgList
        {
            height: 70px;
            float: left;
            width: 360px;
            overflow: hidden;
        }
        #swihLeft
        {
            background: url(images/leftward.png) 0 0 no-repeat;
            display: block;
            height: 70px;
            width: 30px;
        }
        #swihRight
        {
            background: url(images/rightward.png) 0 0 no-repeat;
            display: block;
            height: 70px;
            width: 30px;
        }
        /*左按钮层——为了暂位*/#swihLeftDiv
        {
            float: left;
            width: 30px;
            height: 70px;
        }
        /*右按钮层——为了暂位*/#swihRightDiv
        {
            float: left;
            width: 30px;
            height: 70px;
        }
        /*图片*/.Img
        {
            height: 70px;
            width: 70px;
        }
    </style>


<script type="text/javascript"> 
        var imgLeftLenght = 0; 
        var movePx=90;//每次切换的像素(包含图片宽度与间距) 公式：（左右边距+图片宽度）*每次切换的图片数量
        var imgNum=4;//每次显示的图片个数__修改此处必须连同#imgList样式的宽度一起修改公式：（左右边距+图片宽度）*imgNum
        var speedSwitch=500;//切换速度(毫秒)
        $(document).ready(function() { 

            var imgLiNum = $("#imgList>ul>li").length; 
            $("#swihLeft").click(function() { 
                imgLeftLenght += movePx; 
                $("#imgListUl").animate({ marginLeft: imgLeftLenght }, 500); 
                $("#swihRight").css("display", "block"); 
                if (imgLeftLenght == 0) { 
                    $("#swihLeft").css("display", "none"); 
                } 
            }).css("display", "none"); 

            $("#swihRight").css("display", "none").click(function() { 
                imgLeftLenght -= movePx; 
                $("#imgListUl").animate({ marginLeft: imgLeftLenght }, speedSwitch); 
                $("#swihLeft").css("display", "block"); 
                if (0 == (imgLiNum - imgNum) * movePx + imgLeftLenght) {
                    $("#swihRight").css("display", "none"); 
                } 
            }); 

            if (imgLiNum > imgNum) { 
                $("#swihRight").css("display", "block"); 
            } 
            $("#imgListUl>li").click(function() { 
                $(this).siblings().removeClass("boRed"); 
                $(this).addClass("boRed"); 
            }) 

        }) 

    </script>


<div>
        <div id="swihLeftDiv">
            <a id="swihLeft" href="javascript:void(0);"></a>
        </div>
        <div id="imgList">
            <ul id="imgListUl">
                <li>
                    <img class="Img" src='uploaded/201201/0c89b113-9fdb-4194-b46e-7a80122256da.jpg' />
                </li>
                <li>
                    <img class="Img" src='uploaded/201201/0ccf0ed1-571c-496d-a6f2-f164a14d90de.jpg' />
                </li>
                <li>
                    <img class="Img" src='uploaded/201201/0c89b113-9fdb-4194-b46e-7a80122256da.jpg' />
                </li>
                <li>
                    <img class="Img" src='uploaded/201201/0ccf0ed1-571c-496d-a6f2-f164a14d90de.jpg' />
                </li>
                <li>
                    <img class="Img" src='uploaded/201201/0c89b113-9fdb-4194-b46e-7a80122256da.jpg' />
                </li>
                <li>
                    <img class="Img" src='uploaded/201201/0ccf0ed1-571c-496d-a6f2-f164a14d90de.jpg' />
                </li>
            </ul>
        </div>
        <div id="swihRightDiv">
            <a id="swihRight" href="javascript:void(0);"></a>
        </div>
    </div>