幻灯片js单独调用的代码

Category: 经典代码收集

ps：很多网站全站是div+css的，页面代码写的不错，但是幻灯片这块就出现了大片的js代码，下面记录下我收集的一个幻灯片js单独引用的代码。
下面是html代码：

  1. <html>
  2. <title>js幻灯片</title>
  3. <link href="ImageView.css" rel="stylesheet" type="text/css" />
  4. <body>           
  5. <div id="main">
  6.  <div id="focus">           
  7. <!--以下为焦点图-->
  8. <div class="imageview" id="ImageViews">
  9. <ul class="slider slider2" id="idSlider2">
  10. <li><a href="#" title="">
  11. <img src="091001/1_1419179971.jpg" /></a></li>
  12. <li><a href="#" title="">
  13. <img src="091001/1_1419172062.jpg" /></a></li>
  14. <li><a href="#" title="">
  15. <img src="1_1419173113.jpg" /></a></li>
  16. <li><a href="#" title="">
  17. <img src="1_1419177044.jpg" /></a></li>
  18. <li><a href="#" title="">
  19. <img src="1_1419177044.jpg" /></a></li>
  20.                      </ul>
  21.                      <ul class=num id=idNum1>
  22.                        <li>1</li>
  23.                        <li>2</li>
  24.                        <li>3</li>
  25.                        <li>4</li>
  26.                      </ul>
  27.                   </div>
  28. <script src="ImageView.js" type=text/javascript></script>
  29.                     <!--以上为焦点图-->
  30. </div>
  31. </div>
  32. </body>
  33. </html>

下面是css代码：

  1. @charset "utf-8";
  2. /*请先在主要CSS中确保各元素间距和填充均为0*/
  3. /*焦点图的样式*/
  4. #idSlider2 img,
  5. #idSlider2 li a img,
  6. #idSlider2 li a:hover img{
  7. padding:0;
  8. border:0;
  9. }
  10. .imageview {
  11. float:left;
  12. overflow: hidden;
  13. width: 650px;
  14. position: relative;
  15. height: 350px;
  16. }
  17. .slider {
  18. float:left;
  19. position: absolute;
  20. }
  21. .slider li {
  22. display: inline;
  23. list-style-type: none;
  24. }
  25. .slider img {
  26. display: block;
  27. width: 650px;
  28. height: 350px;
  29. }
  30. .slider2 {
  31. width: 2600px;
  32. }
  33. .slider2 li {
  34. float: left;
  35. }
  36. #idNum1{
  37. width:150px;
  38. _width:160px;
  39. height:20px;
  40. right: 5px;
  41. bottom: 15px;
  42. position: absolute;
  43. }
  44. #idNum1 li{
  45. float: left;
  46. width:18px;
  47. height:18px;
  48. border: #ff7300 1px solid;
  49. filter:progid:DXImageTransform.Microsoft.BasicImage(opacity:0.75);
  50. margin: 3px 5px;
  51. overflow: hidden;
  52. cursor: pointer;
  53. color: #fff;
  54. font:bold 14px/20px Arial;
  55. background:url(/templets/zei/images/num2.gif) no-repeat center top;
  56. text-align: center;
  57. }
  58. #idNum1 li.on{
  59. border:0;
  60. font:bold 14px/20px Arial; 
  61. margin: 2px 5px;
  62. width: 20px;
  63. color: #fff;
  64. height: 20px;
  65. border: #ff7300 1px solid;
  66. background:url(/templets/zei/images/num2.gif) no-repeat center bottom;
  67. }
  68.  
  69.  
  70. /*SCROLL的样式*/
  71. #area dd{
  72. width:640px;
  73. float:left;
  74. padding:5px;
  75. }
  76. #area #demo{
  77. float:left;
  78. text-align:center;
  79. overflow:hidden;
  80. }
  81. #area #indemo {
  82.     float: left;
  83.     width: 800%;
  84.     }
  85. #area dd ul{
  86. float:left;
  87. margin:0 0 0 2px;
  88. }
  89. #area dd ul li{
  90. float:left;
  91. margin:0 0 0 5px;
  92. }
  93. #area dd ul li:hover{
  94. cursor:pointer;
  95. }
  96. #area dd ul li a img {
  97. height:160px;
  98. padding:1px;
  99. border:1px solid #ccc;
  100. }
  101. #area dd ul li a:hover img {
  102. padding:0;
  103. border:2px solid #c36;
  104. }

下面是js代码：

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

十一月 16th, 2010
2 comments so far

Please leave a comment

  1. 实验台 Says:
    十二月 10th, 2010 at 22:47

    谢谢博主，正需要这个！

    [回复]

  2. ugg boots online Says:
    十二月 11th, 2010 at 15:40

    我感觉好复杂哦。。看的晕晕呼呼的

    [回复]

Leave a Comment