html 代码
- <head>
- <meta charset="utf-8">
- <title > 供应商切换 </title>
- <style>
- *{ margin:0;padding:0;}
- a img{ border:none;}
- a{ text-decoration:none;}
- .swicth-box{
- width:920px;
- height:280px;
- margin:150px auto;
- overflow:hidden;
- border:1px solid #ddd;
- border-top:2px solid #728ca4;
- }
- .swicth-box>ul{
- width:100%;
- height:100%;
- position:relative;
- margin-top:4px;
- }
- .swicth-box>ul>li{
- list-style:none;
- position:absolute;
- top:0;
- background-color:#fff;
- transition:1s all ease-in-out;
- }
- .swicth-box>ul .item{
- width:520px;
- height:280px;
- box-shadow:-3px 0 5px 0 rgba(0,0,0,0.20);
- -webkit-box-shadow:-3px 0 5px 0 rgba(0,0,0,0.20);
- -o-box-shadow:-3px 0 5px 0 rgba(0,0,0,0.20);
- -moz-box-shadow:-3px 0 5px 0 rgba(0,0,0,0.20);
- -ms-box-shadow:-3px 0 5px 0 rgba(0,0,0,0.20);
- overflow:hidden;
- }
- .over:after{
- content:'';
- position:absolute;
- top:0;
- left:0;
- width:100%;
- height:100%;
- background:rgba(0,0,0,.5);
- }
- </style>
- </head>
- <body>
- <div class="swicth-box">
- <ul>
- <li class="item other over">
- <img src="https://aecpm.alicdn.com/tfscom/TB1eCWYbS_I8KJjy0FoXXaFnVXa.jpg" />
- </li>
- <li class="item iran">
- <img src="https://img.alicdn.com/tfs/TB1Pp2IfDnI8KJjy0FfXXcdoVXa-520-280.png_q90_.webp" />
- </li>
- <li class="item egypt">
- <img src="https://img.alicdn.com/simba/img/TB1gWrUXfTM8KJjSZFDSuultXXa.jpg" />
- </li>
- <li class="item turkey">
- <img src="https://img.alicdn.com/simba/img/TB10TmIgcnI8KJjSsziSuv8QpXa.jpg" />
- </li>
- <li class="item india">
- <img src="https://img.alicdn.com/simba/img/TB1SYOGggLD8KJjSszeSuuGRpXa.jpg" />
- </li>
- <li class="item china">
- <img src="https://img.alicdn.com/tfs/TB12mCBfPnD8KJjSspbXXbbEXXa-520-280.jpg_q90_.webp"/>
- </li>
- </ul>
- </div>
- </body>
- </html>
- <script>
- window.onload=function(){
- /****getStyle 封装计算后样式 *****/
- function getStyle(element,attr){
- if(element.currentstyle){
- return element.currentstyle[attr];
- }else{
- return window.getComputedStyle(element,null)[attr];
- }
- }
- /** 构造函数 **/
- function Accordion(obj){
- var _this=this;
- this.box=document.querySelector(obj.dom);
- this.li=_this.box.children[0].children; // 获取整个容器里所有的 li 项;
- this.ul_width=Number(getStyle(_this.box.children[0],'width').replace("px",'')); // 获取 ul 的宽度
- this.li_width=Number(getStyle(_this.box.children[0].children[0],'width').replace("px",'')); // 获取 li 的宽度
- this.spacing=(_this.ul_width-_this.li_width)/(_this.li.length-1);
- this.init=function(){
- for(var i=0;i<_this.li.length;i++){
- if(i==0){
- _this.li[0].style.left=0;
- _this.li[0].classList.remove("over");
- }else{
- _this.li[i].style.left=_this.li_width+_this.spacing*(i-1);
- _this.li[i].classList.add("over");
- }
- }
- };
- this.move=function(){
- var places=new Array(); // 创建数组保存每个 li 的位置
- for(var i=0;i<_this.li.length;i++){
- (function(i){
- _this.li[i].onmouseover=function(e){
- var e=e||window.event;
- if(e.cancelBubble){
- e.cancelBubble = true;
- }else{
- e.topPropagation;
- }
- /****** 根据鼠标 hovre 的下标判断每个 li 的位置 ******/
- switch(i){
- case 0:
- for(var index=0;index<_this.li.length;index++){
- if(index==0){
- places[0]=0;
- }else{
- places[index]=_this.li_width+(index-1)*_this.spacing;
- }
- }
- break;
- default:
- for(var index=0;index<_this.li.length;index++){
- if(index==0){
- places[0]=0;
- }else if(index<=i){
- places[index]=_this.spacing*index;
- }else{
- places[index]=_this.li_width+(index-1)*_this.spacing;
- }
- }
- break;
- }
- /**** 给每个 li 的 left 赋值 ****/
- for(var index=0;index<_this.li.length;index++){
- _this.li[index].style.left=places[index];
- _this.li[index].classList.add("over");
- }
- _this.li[i].classList.remove("over");
- }
- }(i));
- }
- }
- this.init(); // 自执行初始化方法
- }
- var accordion=new Accordion({dom:'.swicth-box'});
- accordion.move();
- }
- </script>
来源: http://www.qdfuns.com/article/48682/11c52295822aee055e37a15d0ea96ebf.html