图片轮翻效果_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:36:56
Original
1375 Leute haben es durchsucht

<!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=utf-8" /><title>图片轮翻</title><link href="css/main.css" type="text/css" rel="stylesheet" /></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://www.17sucai.com/" target="_blank"><img  src="images/01.jpg" alt="图片轮翻效果_html/css_WEB-ITnose" ></a></td>                <td class="td_f"><a href="http://www.17sucai.com/" target="_blank"><img  src="images/02.jpg" alt="图片轮翻效果_html/css_WEB-ITnose" ></a></td>                <td class="td_f"><a href="http://www.17sucai.com/" target="_blank"><img  src="images/03.jpg" alt="图片轮翻效果_html/css_WEB-ITnose" ></a></td>                <td class="td_f"><a href="http://www.17sucai.com/" target="_blank"><img  src="images/04.jpg" alt="图片轮翻效果_html/css_WEB-ITnose" ></a></td>                <td class="td_f"><a href="http://www.17sucai.com/" target="_blank"><img  src="images/05.jpg" alt="图片轮翻效果_html/css_WEB-ITnose" ></a></td>            </tr>        </tbody>    </table>    <ul id="idNum" class="num"></ul></div></div></div></body></html>
Nach dem Login kopieren

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}.container{width:610px;height:205px;margin:20px auto 0 auto;}.container a img{width:610px;height:205px}.container img{border-bottom-style:none;border-right-style:none;border-top-style:none;border-left-style:none}.td_f a img{padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px}.num{position:absolute;width:90px;float:right;top:180px;left:520px}.num li{    text-align: center;    line-height: 15px;    margin: 1px;    width: 15px;    font-family: arial;    float: left;    height: 15px;    color: #86a2b8;    font-size: 12px;    cursor: pointer;    background-image: url(../images/flashbutton.gif);    background-repeat: no-repeat;    background-position: -15px 0px;}.num li.on{    line-height: 15px;    width: 15px;    height: 15px;    color: #ffffff;    background-image: url(../images/flashbutton.gif);    background-repeat: no-repeat;}#body{ width:968px; height:500px; background-color:#F9F}#bottom{ width:968px; height:150px}
Nach dem Login kopieren

Nach dem Login kopieren

<script type="text/javascript">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: {        easeOut: 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><script type="text/javascript">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", 5, { 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>
Nach dem Login kopieren

 
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage