js 圖片切換特效

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章提供一款js 圖片切換特效，這是一款完全原他css教程 js執行個體的圖片轉場效果，如果你正在找相容多瀏覽器的ie ff ie8圖片轉場效果可以免費進來看看

<!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;
   }
  }
}
}

//容器物件,滑動對象,切換數量到js 圖片轉場效果
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(); }
})

//設定按鈕樣式 js 圖片轉場效果
st.onstart = function(){
  foreach(nums, function(o, i){ o.classname = st.index == i ? "on" : ""; })
}
st.run();
</script>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

js 圖片切換特效

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support