首页>>Jquery图片>>JavaScript图像左右滑动焦点图(2018-08-31)

JavaScript图像左右滑动焦点图

JavaScript图像左右滑动焦点图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. //计算idslider2的宽度开始  
  3. var kuan1=0;  
  4. var kuand=document.getElementById('idSlider2')  
  5. var kuan=document.getElementById('idSlider2').getElementsByTagName("li");  
  6. var tpz=kuan.length;//图片总个数  
  7. for(var i=0; i<kuan.length; i++){  
  8.     kuan1+=625;  
  9.     }  
  10. kuand.style.width=kuan1+'px';  
  11. //计算结束  
  12.   
  13. var $ = function (id) {  
  14.     return "string" == typeof id ? document.getElementById(id) : id;  
  15. };  
  16.   
  17. var Class = {  
  18.   create: function() {  
  19.     return function() {  
  20.       this.initialize.apply(this, arguments);  
  21.     }  
  22.   }  
  23. }  
  24.   
  25. Object.extend = function(destination, source) {  
  26.     for (var property in source) {  
  27.         destination[property] = source[property];  
  28.     }  
  29.     return destination;  
  30. }  
  31.   
  32. var TransformView = Class.create();  
  33. TransformView.prototype = {  
  34.   //容器对象,滑动对象,切换参数,切换数量  
  35.   initialize: function(container, slider, parameter, count, options) {  
  36.     if(parameter <= 0 || count <= 0) return;  
  37.     var oContainer = $(container), oSlider = $(slider), oThis = this;  
  38.   
  39.     this.Index = 0;//当前索引  
  40.       
  41.     this._timer = null;//定时器  
  42.     this._slider = oSlider;//滑动对象  
  43.     this._parameter = parameter;//切换参数  
  44.     this._count = count || 0;//切换数量  
  45.     this._target = 0;//目标参数  
  46.       
  47.     this.SetOptions(options);  
  48.       
  49.     this.Up = !!this.options.Up;  
  50.     this.Step = Math.abs(this.options.Step);  
  51.     this.Time = Math.abs(this.options.Time);  
  52.     this.Auto = !!this.options.Auto;  
  53.     this.Pause = Math.abs(this.options.Pause);  
  54.     this.onStart = this.options.onStart;  
  55.     this.onFinish = this.options.onFinish;  
  56.       
  57.     oContainer.style.overflow = "hidden";  
  58.     oContainer.style.position = "relative";  
  59.       
  60.     oSlider.style.position = "absolute";  
  61.     oSlider.style.top = oSlider.style.left = 0;  
  62.   },  
  63.   //设置默认属性  
  64.   SetOptions: function(options) {  
  65.     this.options = {//默认值  
  66.         Up:         true,//是否向上(否则向左)  
  67.         Step:       5,//滑动变化率  
  68.         Time:       10,//滑动延时  
  69.         Auto:       true,//是否自动转换  
  70.         Pause:      2000,//停顿时间(Auto为true时有效)  
  71.         onStart:    function(){},//开始转换时执行  
  72.         onFinish:   function(){}//完成转换时执行  
  73.     };  
  74.     Object.extend(this.options, options || {});  
  75.   },  
  76.   //开始切换设置  
  77.   Start: function() {  
  78.     if(this.Index < 0){  
  79.         this.Index = this._count - 1;  
  80.     } else if (this.Index >= this._count){ this.Index = 0; }  
  81.       
  82.     this._target = -1 * this._parameter * this.Index;  
  83.     this.onStart();  
  84.     this.Move();  
  85.   },  
  86.   //移动  
  87.   Move: function() {  
  88.     clearTimeout(this._timer);  
  89.     var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);  
  90.       
  91.     if (iStep != 0) {  
  92.         this._slider.style[style] = (iNow + iStep) + "px";  
  93.         this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);  
  94.     } else {  
  95.         this._slider.style[style] = this._target + "px";  
  96.         this.onFinish();  
  97.         if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }  
  98.     }  
  99.   },  
  100.   //获取步长  
  101.   GetStep: function(iTarget, iNow) {  
  102.     var iStep = (iTarget - iNow) / this.Step;  
  103.     if (iStep == 0) return 0;  
  104.     if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);  
  105.     return iStep;  
  106.   },  
  107.   //停止  
  108.   Stop: function(iTarget, iNow) {  
  109.     clearTimeout(this._timer);  
  110.     this._slider.style[this.Up ? "top" : "left"] = this._target + "px";  
  111.   }  
  112. };  
  113.   
  114. window.onload=function(){  
  115.     function Each(list, fun){  
  116.         for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }  
  117.     };  
  118.       
  119.     var objs2 = $("idNum2").getElementsByTagName("li");  
  120.     var tv2 = new TransformView("idTransformView2", "idSlider2", 625, tpz, {      
  121.         onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按钮样式  
  122.         Up: false  
  123.     });//6是轮播总数  
  124.     tv2.Start();  
  125.     Each(objs2, function(o, i){  
  126.         o.onmouseover = function(){  
  127.             o.className = "on";  
  128.             tv2.Auto = false;  
  129.             tv2.Index = i;  
  130.             tv2.Start();  
  131.         }  
  132.         o.onmouseout = function(){  
  133.             o.className = "";  
  134.             tv2.Auto = true;  
  135.             tv2.Start();  
  136.         }  
  137.     })  
  138.       
  139.       
  140. }  
  141. </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_688.html