图片的轮播

来源：互联网发布：淘宝店铺装修图片素材编辑：程序博客网时间：2024/05/17 03:21
图片的轮播：当鼠标移到数字上时，会显示相应的图片，鼠标离开数字时，图片会按顺序自己变换。

代码如下：

<!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>
在浏览器中的显示：

阅读全文
1 0