图片的轮播 - 爱码网

图片的轮播：当鼠标移到数字上时，会显示相应的图片，鼠标离开数字时，图片会按顺序自己变换。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            font-size: 16px;
        }

        ul {
            list-style-type: none;
        }

        #myban {
            width: 500px;
            height: 180px;
            border: 1px #ccc solid;
            margin: 50px auto;
            padding: 10px;
            overflow: hidden;
            position: relative;
        }

        #myban .scroll_img li {
            margin-bottom: 10px;
        }

        #myban .scroll_number {
            height: 20px;
            width: 180px;
            overflow: hidden;
            position: absolute;
            left: 150px;
            bottom: 20px;
        }

        #myban .scroll_number li {
            font-size: 14px;
            width: 20px;
            height: 20px;
            background-color: white;
            float: left;
            margin-right: 10px;
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
        }

        .heightlight {

            color: red;
            opacity: 0.5;
        }

    </style>
    <script src="scripts/jquery-1.12.4.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //播放标志位
             var blag = false;
            function huan(){
            //获得图片集合
            var $imgs=$(".scroll_img li");
            //获取数字集合
            var $num = $(".scroll_number li");
              //手动变换图片
            $num.mouseover(function(){
                blag = true;
                    $(this).addClass("heightlight").siblings().removeClass("heightlight");
                    $imgs.eq($(this).index()).show().siblings().hide();
                }).mouseout(function(){
                  blag = false;
            });

            //自动变换图片
                index = $(this).index();
                setInterval(function(){
                    if( blag == true){
                        return;
                    }
                    index++;
                    if(index>$imgs.length){
                        index=0;
                    }
                    $num.eq(index).addClass("heightlight").siblings().removeClass("heightlight");
                    $imgs.eq(index).show().siblings().hide();
                },2000);

            }
            huan();
        });

    </script>
</head>
<body>

<div id="myban">
    <ul class="scroll_img">
        <li><img src="images/scroll_1.jpg"></li>
        <li><img src="images/scroll_2.jpg"></li>
        <li><img src="images/scroll_3.jpg"></li>
        <li><img src="images/scroll_4.jpg"></li>
        <li><img src="images/scroll_5.jpg"></li>
        <li><img src="images/scroll_6.jpg"></li>
    </ul>
    <ul class="scroll_number">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

</div>
</body>
</html>

图片的轮播：当鼠标移到数字上时，会显示相应的图片，鼠标离开数字时，图片会按顺序自己变换。

代码如下：

在浏览器中的显示：