js 图片切换特效

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>js效果</title>
<style>
.container {
width: 660px;
height: 365px
}
.container a img {
width: 660px;
height: 356px
}
.container img {
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
border-left-style: none
}
.num {
position: absolute;
width: 660px;
float: left;
top: 330px;
left: 580px;
}
.num li {
text-align: center;
line-height: 15px;
list-style-type: none;
margin: 1px;
width: 15px;
font-family: arial;
background: url(../images/flashbutton.gif) no-repeat -15px 0px;
float: left;
height: 15px;
color: #86a2b8;
font-size: 12px;
cursor: pointer
}
.num li.on {
line-height: 15px;
width: 15px;
background: url(../images/flashbutton.gif) no-repeat;
height: 15px;
color: #ffffff
}
</style>
<script>
var $ = function (id) {
return "string" == typeof id ? document.getelementbyid(id) : id;
};

var extend = function(destination, source) {
for (var property in source) {
  destination[property] = source[property];
}
return destination;
}

var currentstyle = function(element){
return element.currentstyle || document.defaultview.getcomputedstyle(element, null);
}

var bind = function(object, fun) {
var args = array.prototype.slice.call(arguments).slice(2);
return function() {
  return fun.apply(object, args.concat(array.prototype.slice.call(arguments)));
}
}

var tween = {
quart: {
  easeo教程ut: function(t,b,c,d){
   return -c * ((t=t/d-1)*t*t*t - 1) + b;
  }
},
back: {
  easeout: function(t,b,c,d,s){
   if (s == undefined) s = 1.70158;
   return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
  }
},
bounce: {
  easeout: function(t,b,c,d){
   if ((t/=d) < (1/2.75)) {
    return c*(7.5625*t*t) + b;
   } else if (t < (2/2.75)) {
    return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
   } else if (t < (2.5/2.75)) {
    return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
   } else {
    return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
   }
  }
}
}

//容器对象,滑动对象,切换数量到

var slidetrans = function(container, slider, count, options) {
this._slider = $(slider);
this._container = $(container);//容器对象
this._timer = null;//定时器
this._count = math.abs(count);//切换数量
this._target = 0;//目标值
this._t = this._b = this._c = 0;//tween参数

this.index = 0;//当前索引

this.setoptions(options);

this.auto = !!this.options.auto;
this.duration = math.abs(this.options.duration);
this.time = math.abs(this.options.time);
this.pause = math.abs(this.options.pause);
this.tween = this.options.tween;
this.onstart = this.options.onstart;
this.onfinish = this.options.onfinish;

var bvertical = !!this.options.vertical;
this._css = bvertical ? "top" : "left";//方向

//样式设置
var p = currentstyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";

this.change = this.options.change ? this.options.change :
  this._slider[bvertical ? "offsetheight" : "offsetwidth"] / this._count;
};
slidetrans.prototype = {
//设置默认属性
setoptions: function(options) {
this.options = {//默认值
  vertical: true,//是否垂直方向（方向不能改）
  auto:  true,//是否自动
  change:  0,//改变量
  duration: 50,//滑动持续时间
  time:  10,//滑动延时
  pause:  4000,//停顿时间(auto为true时有效)
  onstart: function(){},//开始转换时执行
  onfinish: function(){},//完成转换时执行
  tween:  tween.quart.easeout//tween算子
};
extend(this.options, options || {});
},
//开始切换
run: function(index) {
//修正index
index == undefined && (index = this.index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
//设置参数
this._target = -math.abs(this.change) * (this.index = index);
this._t = 0;
this._b = parseint(currentstyle(this._slider)[this.options.vertical ? "top" : "left"]);
this._c = this._target - this._b;

this.onstart();
this.move();
},
//移动
move: function() {
cleartimeout(this._timer);
//未到达目标继续移动否则进行下一次滑动
if (this._c && this._t < this.duration) {
  this.moveto(math.round(this.tween(this._t++, this._b, this._c, this.duration)));
  this._timer = settimeout(bind(this, this.move), this.time);
}else{
  this.moveto(this._target);
  this.auto && (this._timer = settimeout(bind(this, this.next), this.pause));
}
},
//移动到
moveto: function(i) {
this._slider.style[this._css] = i + "px";
},
//下一个
next: function() {
this.run(++this.index);
},
//上一个
previous: function() {
this.run(--this.index);
},
//停止
stop: function() {
cleartimeout(this._timer); this.moveto(this._target);
}
};
</script>
</head>

<body>
     <div id=idcontainer2 class=container>
<table id=idslider2 border=0 cellspacing=0 cellpadding=0>
<tbody>
<tr>
    <td class=td_f><a href="http://cs.loupan.com/html/newhouse/20100219/13189.html" target="_blank"><img src="images/huatian4.jpg" /></a></td>
<td class=td_f><a href="http://cs.loupan.com/html/newhouse/20100219/13189.html" target="_blank"><img src="images/huatian3.jpg" ></a></td>
<td class=td_f><a href="http://cs.loupan.com/html/newhouse/20100219/13189.html" target="_blank"><img src="images/huatian2.jpg" ></a></td>
<td class=td_f><a href="http://cs.loupan.com/html/newhouse/20100219/13189.html" target="_blank"><img src="images/huatian.jpg" ></a></td>
   </tr></tbody></table>
<ul id=idnum class=num></ul>
</div>

<script>
var foreach = function(array, callback, thisobject){
  if(array.foreach){
   array.foreach(callback, thisobject);
  }else{
   for (var i = 0, len = array.length; i < len; i++) { callback.call(thisobject, array[i], i, array); }
  }
}

var st = new slidetrans("idcontainer2", "idslider2", 4, { vertical: false });

var nums = [];
//插入数字
for(var i = 0, n = st._count - 1; i <= n;){
  (nums[i] = $("idnum").appendchild(document.createelement("li"))).innerhtml = ++i;
}

foreach(nums, function(o, i){
  o.onmouseover = function(){ o.classname = "on"; st.auto = false; st.run(i); }
  o.onmouseout = function(){ o.classname = ""; st.auto = true; st.run(); }
})

//设置按钮样式

st.onstart = function(){
  foreach(nums, function(o, i){ o.classname = st.index == i ? "on" : ""; })
}
st.run();
</script>
</body>
</html>

时间： 2024-10-03 02:47:50

js 图片切换特效的相关文章

js图片切换特效代码

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js图片切换特效代码</titl

js图片切换代码

<html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> </head> <body> <table width="300" height="300" border="0" align="center" cell

问题描述网页跑马灯的图片切换特效是如何实现的? 网站里跑马灯图片在切换时的特效是如何用JavaScript实现的,求具体的源代码. 解决方案用脚本可以做,CSS3也可以做了. 解决方案二: http://www.xwcms.net/js/xxk-hdm/63283.html 解决方案三: <!DOCTYPE> <html> <head> <title> new document </title> <meta name="gen

jQuery插件slick实现响应式移动端幻灯片图片切换特效_jquery

jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l

picChange 图片切换特效的函数代码_javascript技巧

可扩展的封装方式,方便实现不同特效,源码中给出了淡出效果(fade函数),和移出效果(move函数)的实现方式. 一句话函数调用,实现图片切换特效. picChange("图片ul列表的id" , 切换图片的方法引用 , 图片切换时间 , 图片移动方向); 用最简单的调用方式和最简洁的html代码来实现这个常用的图片切换效果. 使用方法示例: html代码: 复制代码代码如下: <div id="win"> <ul id="picCha

js 图片切换效果代码

<html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js 图片切换效果代码</title> <script language="javascript教程&quo

js图片切换具体实现代码_javascript技巧

本文实例为大家分享了js实现图片切换的方法,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <style> *{ margin:0; padding:0; } .all{ width:600px; height:350px;

完美兼容各大浏览器的jQuery插件实现图片切换特效_jquery

文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦... JS代码部分: 复制代码代码如下: (function ($) { var//申明全局变量 _eleTemp,//缓存变量 _eleThis = $(this),//当前元素 _eleImg = $('.zd-imgChange-img'),//图片组元素

Ajax无刷新实现图片切换特效

ajax|刷新|无刷新一.AjaxMethodusing System;using System.Data;using System.Data.SqlClient; namespace AjaxImage{ /**//// <summary> /// AjaxMethod 的摘要说明. /// </summary> public class AjaxMethod { public AjaxMethod() {