找回密码
当前位置：前端开发者 > 教程 > 正文

JS-京东首页轮播图的实现

2018-11-21 23:41:27 分类：教程 阅读(563) 评论(0)
游戏前端开发主程
游戏开发前端后端
游戏前端开发 策划

xml 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>京东首页</title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
            #wrap {
                width: 500px;
                height: 380px;
                border: 3px solid black;
                margin: 100px auto;
                /*po*/
                position: relative;
            }
            #wrap img {
                width: 500px;
                height: 380px;
                position: absolute;
                /*o0*/
                opacity: 0;
                /*过渡*/
                -webkit-transition: all 1s;
                -moz-transition: all 1s;
                -ms-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
            }
            #wrap img:first-child {
                /*o1*/
                opacity: 1;
            }
            #left,
            #right {
                width: 50px;
                height: 90px;
                background-color: gray;
                color: white;
                position: absolute;
                /*lh90*/
                line-height: 90px;
                top: 50%;
                margin-top: -45px;
            }
            #left {
                left: 0;
            }
            #right {
                right: 0;
            }
            #ul1 {
                /*lstn*/
                list-style-type: none;
                position: absolute;
                bottom: 30px;
                left: 50%;
                margin-left: -75px;
            }
            #ul1 li {
                background-color: gray;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                /*fl*/
                float: left;
                margin-left: 5px;
                line-height: 20px;
                /*tac*/
                text-align: center;
                color: white;
            }
            #ul1 li:first-child {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id=”wrap”>
            <!– 图片 –>
            <img
                src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=8c3abdbfc5bb011953ebab6e33484e2e”
                alt=””
            />
            <img
                src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=d9d4d51d2af370c53cb1d482a7f7589e”
                alt=””
            />
            <img
                src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=12af83edf2accc357141b6cb619c01b1″
                alt=””
            />
            <img
                src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=600dc5fd8c295f95d4d7f716f7ce2939″
                alt=””
            />
            <img
                src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=4907e4596459abe53be2103a029a2327″
                alt=””
            />
            <img
                src=”http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=8f002abe18ea06df90dd14d91d82fef7″
                alt=””
            />
            <!– 分页 –>
            <ul id=”ul1″>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <!– 上下翻页 –>
            <div id=”left”>上一张</div>
            <div id=”right”>下一张</div>
        </div>
        <script type=”text/javascript”>
            //获取对象
            var wrap = document.getElementById(‘wrap’)
            var imgs = wrap.getElementsByTagName(‘img’)
            var left = document.getElementById(‘left’)
            var right = document.getElementById(‘right’)
            var ul1 = document.getElementById(‘ul1’)
            var lis = ul1.getElementsByTagName(‘li’)
            var index = 0 //记录图片所在的下标位置
            //上一张按钮的点击事件
            left.onclick = function() {
                //第一种方式:
                // index–;
                // if (index == -1) {
                // index = 5;
                // }
                //
                // //设置当前下标对应的图片,透明度为1,其它图片设置为0;
                // for (var i = 0;i < imgs.length;i++) {
                // if (index == i) {
                // imgs[i].style.opacity = 1;
                // } else{
                // imgs[i].style.opacity = 0;
                // }
                // }
                //第二种方式:
                //将之前显示的图片隐藏
                imgs[index].style.opacity = 0
                index–
                if (index == -1) {
                    index = 5
                }
                //将切换之后的图片显示
                imgs[index].style.opacity = 1
                //改变分页数 圆点的位置
                changePoint()
            }
            // 下一张的点击事件
            right.onclick = function() {
                //让上一张图片隐藏
                imgs[index].style.opacity = 0
                index++
                if (index == 6) {
                    index = 0
                }
                //显示当前图片
                imgs[index].style.opacity = 1
                //改变分页数 圆点的位置
                changePoint()
            }
            //切换界面(分页数) 圆点的位置
            function changePoint() {
                for (var i = 0; i < lis.length; i++) {
                    //找到图片下标对应的分页小圆点
                    if (index == i) {
                        //图片对应的分页设置背景色红色
                        lis[i].style.backgroundColor = ‘red’
                    } else {
                        //其它为灰色
                        lis[i].style.backgroundColor = ‘gray’
                    }
                }
            }
            //为圆点添加鼠标移入事件
            for (var i = 0; i < lis.length; i++) {
                //鼠标移入事件
                lis[i].onmouseenter = function() {
                    imgs[index].style.opacity = 0
                    for (var j = 0; j < lis.length; j++) {
                        //找到移入当前圆点对应的下标
                        if (this == lis[j]) {
                            index = j //找到对应图片的下标
                        }
                    }
                    //显示圆点对应的图片
                    imgs[index].style.opacity = 1
                    //改变分页数 圆点的位置
                    changePoint()
                }
            }
            //定时器改变图片以及圆点位置
            function changeImage() {
                imgs[index].style.opacity = 0 //隐藏之前的图片
                index++
                if (index == 6) {
                    index = 0
                }
                //显示切换之后的图片
                imgs[index].style.opacity = 1
                //改变分页数 圆点的位置
                changePoint()
            }
            //添加定时器
            //var timer = setInterval(changeImage,1000);
            //或者
            var timer = setInterval(‘changeImage()’, 1000)
            //鼠标移入图片时,清除定时器
            wrap.onmouseenter = function() {
                //清除定时器
                clearInterval(timer)
            }
            //鼠标移出,开启新的定时器
            wrap.onmouseleave = function() {
                timer = setInterval(‘changeImage()’, 1000)
            }
        </script>
    </body>
</html>
ubuntu 前端开发环境
前端开发环境 生产环境搭建
eclipse前端开发环境搭建
» 本文来自：前端开发者 » 《JS-京东首页轮播图的实现》
» 本文链接地址：https://www.rokub.com/8835.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论