H5+C3+JS实现焦点轮换图_h5焦点图切换-CSDN博客

本文链接：https://blog.csdn.net/qq_27905183/article/details/53930424

实现思路讲解：先定义一个父div，其宽度为100%，在里面定义一个子div用于盛装图片，其宽度和高度和图片的宽高是一样的，并设置为overflow: hidden。这里我们设置为600px的图片宽度，设置容器div的position定位为相对定位，这样就可以通过left属性来使图片进行焦点轮转。具体实现就是每次点击向左移动时，其left属性就减少600px，这样当前显示的图片就会向左完全移动出去并且隐藏，而此时显示的图片就是其相邻右边的图片，这时候我们还可以添加一个动画效果，为transition: left 0.3s easy-out，这样看起来就美观一点

实现代码:

//框架代码
<!Doctype html>

<html>

    <head>

        <!-- start 百度爬虫优化搜索 -->
        <meta name="Keywords" content="爱淘宝，CSS，焦点轮换图" />
        <meta charset="utf-8" />
        <meta name="author" content="chengxi" />
        <!-- end meta -->

        <title>爱淘宝-焦点轮换图</title>

        <!-- start css style -->
        <style>

        </style>
        <!-- end style -->

        <!-- start js -->
        <script>
        window.onload = function() {
            } ;
        </script>
        <!-- end js -->

    </head>

    <body>

        <div id="content">
            <div id="maincontent" style="left: 0px; z-index: 2;">
                    <img src="http://pic250.quanjing.com/imageclk005/ic01460447.jpg" />
                    <img src="http://pic250.quanjing.com/imageclk007/ic01706307.jpg" />
                    <img src="http://pic250.quanjing.com/imageclk004/ic01302160.jpg" />
                    <img src="http://pic250.quanjing.com/imageclk007/ic01703915.jpg" />
                    <img src="http://pic250.quanjing.com/imageclk007/ic01703802.jpg" />
            </div>
            <div id="linkdiv">
                <button index="1" class="on"></button>
                <button index="2"></button>
                <button index="3"></button>
                <button index="4"></button>
                <button index="5"></button>
            </div>
        </div>

        <a href="#" id="prev">&lt;</a>
        <a href="#" id="next">&gt;</a>

    </body>

</html>


//CSS样式代码
/*start content css */
            #content {
                width: 600px;
                height: 300px;
                border: 1px solid grey;
                overflow: hidden;
                position: relative;
                top: 64px;
                left: 400px;
            }
            /*start maincontent css */
            #content #maincontent {
                width: 4200px;
                height: 300px;
                position: absolute;
                z-index: 1;
                transition: left 0.3s ease-out;
                -webkit-transition: left 0.3s ease-out;
            }
            #content #maincontent img{
                float: left;
                width: 600px;
                height: 300px;
            }
            /* end maincontent */
            /* start linkdiv */
            #content #linkdiv {
                    height: 200px;
                    width: 400px;
                    border: 1px solid red;
                }
                #content #linkdiv button{
                    display: block;
                    width: 12px;
                    height: 12px;
                    border: 1px solid grey;
                    border-radius: 9px;
                    left: 250px;
                    top: 270px;
                    position: relative;
                    float: left;
                    margin-left: 6px;
                    z-index: 4;
                }
                #content #linkdiv {
                    height: 200px;
                    width: 400px;
                    border: 1px solid red;
                }
                #content #linkdiv button{
                    display: block;
                    border: 1px solid rgb(0,0,0);
                    border-radius: 9px;
                    background-color: rgb(0,0,0);
                }
                #content #linkdiv button[class = 'on'] {
                    background-color: orange;
                }
                #content #linkdiv button:hover{
                    border: 2px solid rgb(0,0,0);
                    cursor: pointer;
                }
            /* end linkdiv */
            /* end content */
            /* start prev and next button css */
            #prev{
                display: block;
                border: 1px solid grey;
                color: grey;
                text-decoration: none;
                line-height: 39px;
                text-align: center;
                font-size: 36px;
                position: absolute;
                top: 200px;
                left: 310px;
                background-color: RGBA(0,0,0,0.1);
                z-index: 2;
            }
            #prev:hover{
                background-color: RGBA(0,0,0,0.8);
            }
            #next{
                display: block;
                border: 1px solid grey;
                color: grey;
                text-decoration: none;
                line-height: 39px;
                text-align: center;
                font-size: 36px;
                position: absolute;
                top: 200px;
                left: 1072px;
                background-color: RGBA(0,0,0,0.1);
                z-index: 2;
            }
            #next:hover{
                background-color: RGBA(0,0,0,0.8);
            }
            /* end prev and next css */

//JS脚本代码
var content = document.getElementById("content");
                var imgcontent = document.getElementById("maincontent") ;
                var prev = document.getElementById("prev") ;
                var next = document.getElementById("next") ; 
                var buttons = document.getElementsByTagName("button") ;

                var index = 1;

                /* next/prev箭头滚动图片js */         
                prev.onclick = function() {
                    if(parseInt(imgcontent.style.left) < 0) {
                        imgcontent.style.left = parseInt(imgcontent.style.left) + 600 + 'px' ;
                        buttons[index - 1].className = "" ;
                        index--;
                        buttons[index - 1].className = "on" ;
                    }
                    else{
                        buttons[index - 1].className = "" ;
                        index = 5;
                        buttons[index -1].className = "on" ;
                        imgcontent.style.left = "-2400px" ;
                    }
                } ;

                next.onclick = function() {
                        if(parseInt(imgcontent.style.left) > -2400) {
                            imgcontent.style.left = parseInt(imgcontent.style.left) - 600 + 'px' ;
                            buttons[index -1].className = "" ;
                            index++;
                            buttons[index -1].className = "on" ;
                        }
                        else {
                            imgcontent.style.left = "0px" ;
                            buttons[index - 1].className = "" ;
                            index = 1;
                            buttons[index - 1].className = "on" ;
                        }
                } ;
                /*end next/prev */


                /* start linkpic js */
                for(var i =0; i <buttons.length; i++) {
                    /* buttons.length = 5 */
                    buttons[i].onclick = function() {
                        var myindex = this.getAttribute("index") ;
                        if(myindex == index) {
                            return ;
                        }
                        imgcontent.style.left = parseInt(imgcontent.style.left) - (myindex - index) * 600 + 'px' ;
                        index = myindex;
                        for(var j = 0; j <buttons.length; j++) {
                            if(buttons[j].className == "on") {
                                buttons[j].className = "" ;
                            }
                        }
                        this.className = "on" ;
                    } ;
                }
                /* end linkpic */