Javascript Web Slider 焦点图教程源码

最新推荐文章于 2024-09-22 11:17:00 发布

foreverpx

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量1.5k

点赞数

分类专栏： Web前端文章标签：前端开发 javascript

本文链接：https://blog.csdn.net/forevercjl/article/details/12566211

版权

Web前端专栏收录该内容

115 篇文章 1 订阅

订阅专栏

HTML代码：

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
             <title></title> 
        
         <style> 
        
         *{padding:0;margin:0} 
        
         ul{list-style:none} 
        
         .slider-focus{width:670px;height:240px;overflow:hidden;position:relative;margin:100px auto} 
        
         .slider-focus .slider{width:3500px; position:absolute; left:0px; top:0px; height:240px} 
        
         .slider-focus .slider li{float:left;} 
        
         .slider-focus .btns{position: absolute; right: 0px; bottom: 5px} 
        
         .slider-focus .btns li{width:18px;height:18px;  float:left; background:#fff; margin-right:5px; cursor:pointer} 
        
         .slider-focus .btns li.cur{background:#f60} 
        
         </style> 
        
         </head> 
        
         <body> 
        
             <div class="slider-focus"> 
        
                 <ul class="slider"> 
        
                     <li><img src="http://img14.360buyimg.com/da/g13/M03/0D/0D/rBEhVFJCwIQIAAAAAADs5q4P0g8AADgxQMhvMIAAOz-234.jpg"></li> 
        
                                 <li><img src="http://img11.360buyimg.com/da/g13/M05/0D/0A/rBEhUlJCfiYIAAAAAADqWhDpUVsAADfqgDwmw4AAOpy960.jpg"></li> 
        
                                 <li><img src="http://img11.360buyimg.com/da/g14/M07/11/15/rBEhVVI_5zMIAAAAAADDgfSaKlQAADc8AFf20cAAMOZ670.jpg"></li> 
        
                                 <li><img src="http://img11.360buyimg.com/da/g13/M03/0D/13/rBEhVFJD_HcIAAAAAADsfenKOe0AADjVwPmryQAAOyV341.jpg"></li> 
        
                                 <li><img src="http://img14.360buyimg.com/da/g15/M00/0C/0E/rBEhWlJEHcwIAAAAAAEFI3XGv_YAADj-wC9W60AAQU7805.jpg"></li> 
        
                 </ul> 
        
                 <ul class="btns"> 
        
                     <li class="cur"></li> 
        
                     <li></li> 
        
                     <li></li> 
        
                     <li></li> 
        
                     <li></li> 
        
                 </ul> 
        
             </div> 
        
         <script src="jquery-1.9.1.js"></script> 
        
         <script src="slider.js"></script> 
        
         </body> 
        
         </html>

 
   Javasscript 代码： 
    
         function Sliderfocus(options){ 
        
             this.focus = options.focus; 
        
             this.slider = options.slider; 
        
             this.btns = options.btns; 
        
             this.width = options.width; 
        
             this.speed = options.speed || 800; 
        
             this.curIndex = options.curIndex || 0; 
        
             this.size = this.btns.size(); 
        
             this.init(); 
        
             this.timeout = null; 
        
             this.stopTemp = 1 ; 
        
         } 
        
         Sliderfocus.prototype = { 
        
             init:function(){ 
        
               this.auto(); 
        
               this.bind(); 
        
             }, 
        
             play:function(){ 
        
                 this.slider.stop().animate({ 
        
                     left:-this.curIndex * this.width 
        
                 },this.speed); 
        
             }, 
        
             auto:function(){ 
        
                 var that = this; 
        
                 this.timeout = setTimeout(function(){ 
        
                     if(that.stopTemp == 0){ 
        
                         return; 
        
                     }else{ 
        
                         that.next(); 
        
                         that.auto(); 
        
                     } 
        
                 },4000); 
        
             }, 
        
             prev:function(){ 
        
                 this.curIndex = --this.curIndex<0? this.size-1 : this.curIndex; 
        
                 this.play(); 
        
             }, 
        
             next:function(){ 
        
                 this.curIndex = ++this.curIndex>this.size-1? 0 : this.curIndex; 
        
                 console.log(this.curIndex) 
        
                 this.play(); 
        
             }, 
        
             stop:function(){ 
        
                 this.stopTemp = 0; 
        
             }, 
        
             bind:function(){ 
        
                 var that = this; 
        
                 this.focus.bind("mouseover",function(){ 
        
                     that.stop(); 
        
                 }).bind("mouseout",function(){ 
        
                         that.stopTemp = 1; 
        
                         //that.auto(); 
        
                     }); 
        
                 this.letsgo(); 
        
             }, 
        
             letsgo:function(){ 
        
                 var that = this; 
        
                 this.btns.bind("click",function(){ 
        
                     var index = $(this).index(); 
        
                     that.curIndex = index; 
        
                     that.play(); 
        
                 }); 
        
             } 
        
         }; 
        
         new Sliderfocus({ 
        
             focus:$(".slider-focus"), 
        
             slider:$(".slider-focus .slider"), 
        
             btns:$(".btns li"), 
        
             width:670 
        
         });