转~~前端轮播  简单实现  啵啵啵！！！        2016-09-21    14:32:53

 

 

需要实现的效果----》 新闻，shopping ，物品的轮播展示，鼠标点击锁定。

　　效果图：

 

　　　　　　

　　　　　　　　

 

　　代码实现---》　　

 

　　　　

 

　　

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge">
    <title></title>
    <link rel="stylesheet"href="">
    <style type="text/css">
        div,img,ul,li{padding:0px;margin:0px;}
        .content{width:480px;height:300px;border:1px solid red;margin:100px auto;}
        img{width:100%;height:100%;padding-bottom:10px;}
        ul li{list-style:none;float:left;border:1px solid orange;height:30px;width:58px;text-align:center;line-height:30px;}
</style>
</head>
<body>
    <div class="content">
        <img src="./img/1.jpg"alt="">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    </body>
    <script type="text/javascript">
        var oImg = document.getElementsByTagName('img')[0];
        var count = 1;

        function changePic() {
            count++;
            if (count > 6) {
                count = 1;
            }
            oImg.src = 'img/' + count + '.jpg';
        }
        var interID = setInterval(changePic, 1000);
        //鼠标移入停止播放
        oImg.onmouseover = function() {
                clearInterval(interID);
        }
        //鼠标移出继续播放
        oImg.onmouseout = function() { 
            clearInterval(interID);
            interID = setInterval(changePic,1000);
        }
        //鼠标移入到数字上的时候,显示对应的图片
        var oLi = document.getElementsByTagName('li'); 
        for (var num = 0;num < oLi.length;num++) { 
            //给每个li标签增加属性，保存当前的索引位置
            oLi[num].index = num;
            //移到到数字上,停止播放
            oLi[num].onmouseover = function() { 
                //停止播放
                clearInterval(interID);
                this.style.background = 'orange';
                count = this.index; 
                //调用循环播放图片方法
                changePic();
            }
            //移出时,继续从停止的地方播放
            oLi[num].onmouseout = function() {
                clearInterval(interID);
                interID = setInterval(changePic, 1000);
                this.style.background = 'white';
                count = this.index;
                changePic();
            }
        }
    </script>

</html>

 

　　参考url：https://xianfei689.github.io/hg-canvas/pc/carousel/carousel.html