H5+C3+JS实现焦点轮换图

来源：互联网发布：增量内部收益率的算法编辑：程序博客网时间：2024/05/18 13:09

实现思路讲解：先定义一个父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 */

0 0