图片轮翻效果 / 憋错料

图片轮翻效果

<!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"></a></td>
                <td class="td_f"><a href="http://www.17sucai.com/" target="_blank"><img src="images/02.jpg"></a></td>
                <td class="td_f"><a href="http://www.17sucai.com/" target="_blank"><img src="images/03.jpg"></a></td>
                <td class="td_f"><a href="http://www.17sucai.com/" target="_blank"><img src="images/04.jpg"></a></td>
                <td class="td_f"><a href="http://www.17sucai.com/" target="_blank"><img src="images/05.jpg"></a></td>
            </tr>
        </tbody>
    </table>
    <ul id="idNum" class="num"></ul>
</div>
</div>

</div>

</body>
</html>

@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}

<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>

时间： 2024-10-28 16:28:07

图片轮翻效果的相关文章

ViewPager实现图片轮翻效果

很多App都有这种效果,特别一些电商类的App,顶部每隔几秒钟会向右翻页显示下张图片,用来作推广或者内容展示用的.今天来简单地模仿一下,还自带一个自动跳动的小功能(底部有几个小点,图片移动的时候,点的状态也在变化),用定时器来实现不难. [java] view plaincopyprint? import java.util.ArrayList; import java.util.concurrent.Executors; import java.util.concurrent.Schedule

简单图片轮翻效果实现

使用css3与js开发出的一款图片切换,可以跟据切换按钮对图片进行切换,之前是jquery插件的模式开发了一个这样的插件逻辑会比较复杂就不拿出来,现在这个小案例是基对象的思想写比较简单,对于初学者比好理解! 效果图: 查看源代码

Android实现图片轮显效果——自定义ViewPager控件

一.问题概述使用ViewPager控件实现可横向翻页.水平切换图片等效果,但ViewPager需要手动滑动才能切换页面,图片轮显效果的效果本质上就是在ViewPager控件的基础上让它能自动的进行切换,所以实现图片轮显步骤如下: 1. 扩展ViewPager自定义一个MyScrollImageView类 2. 为MyScrollImageView定义适配器,装载图片信息 3. 定义图片滑动动画时间控制类接下来我们就一步步实现下图案例: 二.实现套路 1.为自定义ViewPager控件编

CSS3图片轮播效果

原文:CSS3图片轮播效果在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

js实现淘宝首页图片轮播效果

原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!-- * {margin: 0;padding:0;} body

jQuery个性化图片轮播效果

购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果两个区域: 最外层容器区域,如上图红色线框矩形选项卡区域两个事件: 鼠标悬浮或鼠标划入mouseover 鼠标离开mouseleave /**大屏广告滚动样式**/ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

首页图片轮播效果

<html><head><meta charset="utf-8" /><title>首页图片轮播效果</title><style type="text/css">* {margin: 0;padding:0;}body {background: #222;}ol{list-style: none;}img {border: 0 none;}#slider { border: 1px soli

简单的图片轮播效果

用js代码来实现一个简单的图片轮播效果鼠标移入图片后显示左右箭头按钮,点击就可以实现图片的切换. 以下分别是html代码和js代码,欢迎批评和讨论! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> *{padding:0px; margin:0px;

ASP动态网页设计与Ajax技术----制作图片轮显效果

<!doctype html><html><head><meta charset="utf-8"><title>制作图片轮显效果</title></head><style type="text/css"> img{border: 0px;} .imgsBox{overflow: hidden; width: 282px; height: 176px;} .imgs a{d