轮廓图的点击效果，欢迎一起来探讨-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div1{
        width:800px;
        height:100px;
        background: red;
        margin: 100px auto;
        position: relative;
        overflow: hidden;

    }
    #div1 ul{
        position: absolute;
        top:0;
        left: 0;

    }
    #div1 ul li{

        height: 100px;
        float: left;
        list-style: none;
        }

    </style>
    <script>
        window.onload=function()
        {
            var odiv=document.getElementById('div1');
            var uu=odiv.getElementsByTagName('ul')[0];
            var ll=uu.getElementsByTagName('li');
            var timer=null;
            var speed=2;

            uu.innerHTML=uu.innerHTML+uu.innerHTML;
            uu.style.width=ll[0].offsetWidth*ll.length+'px';
        function move(){
                if(uu.offsetLeft<-uu.offsetWidth/2)
                {
                    uu.style.left='0';
                }
                if(uu.offsetLeft>0)
                {
                    uu.style.left=-uu.offsetWidth/2+'px'
                }
                uu.style.left=uu.offsetLeft+speed+'px';
            }

            var timer=setInterval(move,30)
             odiv.onmouseover=function()
             {
                clearInterval(timer);
             }
            odiv.onmouseout=function()
            {
                 timer=setInterval(move,30)
            }
            document.getElementsByTagName('a')[0].onclick=function(){

                speed=-2;
            };
            document.getElementsByTagName('a')[1].onclick=function(){
                speed=2;
            }
        }

    </script>
</head>
<body>
    <a href="javascript:;">向左走</a>
    <a href="javascript:;">向右走</a>
    <div id="div1">
        <ul>
            <li><img src="img2/1.jpg"></li>
            <li><img src="img2/2.jpg"></li>
            <li><img src="img2/3.jpg"></li>
            <li><img src="img2/4.jpg"></li>
        </ul>
    </div>
</body>
</html>