当前位置: 代码迷 >> JavaScript >> 求个图片自动切换JS代码解决办法
  详细解决方案

求个图片自动切换JS代码解决办法

热度:378   发布时间:2013-11-29 00:21:24.0
求个图片自动切换JS代码
三张图片循环切换,JS不太懂,最好能给我贴段能运行的代码,O(∩_∩)O谢谢。。

------解决方案--------------------
jquery的一个图切换插件,jquery.cycle.all
当然不要求什么过渡效果之类的话,直接写也挺简单

------解决方案--------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>淘宝首页图片轮播效果</title>
<style>
<!--
* {margin: 0;padding:0;}
body {background: #222;}
ol {list-style: none;}
img {border: 0 none;}
#slider {
 border: 1px solid #F60;
 width: 490px;
 height: 170px;
 overflow: hidden;
 position: relative;
 margin: 2em auto;
}
#slider .player {
 /*width: 2450px;
 height: 850px;*/
 position: absolute;
 top: 0px;
 left: 0px;
}
#slider .player li {
 width: 490px;
 height: 170px;
}
#slider .btns {
 position: absolute;
 right: 10px;
 bottom: 5px;
 height: 30px;
}
#slider .btns li {
 font: 13px Tahoma, Arial, 宋体, sans-serif;
 float: left;
 margin: 0 3px;
 border: 1px solid #F60;
 background-color: #FFF;
 color: #CC937A;
 opacity: .8;
 cursor: pointer;
 width: 20px;
 height: 20px;
 line-height: 19px;
 text-align: center;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
#slider .btns li.active {
 background: #F60;
 color: #FFF;
 font-weight: bold;
 opacity: 1;
}
-->
</style>
<script>
//<![CDATA[
function $(id) {
 return document.getElementById(id);
};
function getByClass(className, context) {
/*
 * 功能说明:
 * 传入类名、节点名(默认document),获取context下类名为classNa的节点
 */
 context = context 
------解决方案--------------------
 document;
 if(context.getElementsByClassName) {
  return context.getElementsByClassName(className);
 } else {
  var nodes = [];
  var tags = context.getElementsByTagName('*');
  for(var i=0, len=tags.length; i<len; i++) {
   if(hasClass(tags[i], className)) {
    nodes.push(tags[i]);
   }
  }
  return nodes;
 }
}
function hasClass(node, className) {
/*
 * 功能说明:
 * 传入节点及一个类名,检查该节点是否含有传入的类名
 */
 var names = node.className.split(/\s+/);
 for(var i=0, len=names.length; i<len; i++) {
  if(names[i] == className) {
   return true;
  }
 }
 return false;
}
function animate(o,start,alter,dur,fx) {
/*
 * 功能说明:
 * 设置动画
 * o:要设置动画的对象
 * start:开始的对象
 * alter:总的对象
 * dur:动画持续多长时间
 * fx:动画类型
 */
 var curTime=0;
 var t=setInterval(function () {
  if (curTime>=dur) clearInterval(t);
  for (var i in start) {
   o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";
  }
  curTime+=40;
 },40);
 return function () {
  clearInterval(t);
 };
}
var Tween = {
/*
 * 功能说明:
 * 加速运动
 * curTime:当前时间,即动画已经进行了多长时间,开始时间为0
 * start:开始值
 * alter:总的变化量
 * dur:动画持续多长时间
 */
 Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter;},//最简单的线性变化,即匀速运动
 Quad:{//二次方缓动
  easeIn:function (start,alter,curTime,dur) {
   return start+Math.pow(curTime/dur,2)*alter;
  },
  easeOut:function (start,alter,curTime,dur) {
   var progress =curTime/dur;
   return start-(Math.pow(progress,2)-2*progress)*alter;
  },
  easeInOut:function (start,alter,curTime,dur) {
   var progress =curTime/dur*2;
   return (progress<1?Math.pow(progress,2):-((--progress)*(progress-2) - 1))*alter/2+start;
  }
 },
};
function Player(btns, scrollContent, imgHeight, timeout, hoverClass) {
/*
 * btns:按钮,类型是数组
  相关解决方案