仿淘宝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=utf-8" />

<title>焦点图</title>

<style type="text/css"> 

body {margin:0px;padding:0px;background:url(http://www.codefans.net/jscss/demoimg/201109/bg.jpg);}

ul, li {margin:0px;padding:0px;float:left;list-style-type:none;}

.frame {width:1010px;height:auto;overflow:hidden;margin:40px auto 0 auto;}

.box {width:490px;height:170px;padding:1px;float:left;display:inline;margin:5px;background:#fff;position:relative;border:1px solid #dedede;}

.list {width:490px;height:170px;float:left;overflow:hidden; position:relative;}

.list ul {position:absolute;top:0px;left:0px;}

.list li {width:490px;height:170px;float:left;}

.list li.opacity {position:absolute;top:0px;left:0px;opacity:0;filter:alpha(opacity:0)}

.but {width:105px;height:16px;right:1px;bottom:5px;position:absolute;z-index:1;}

.but li {width:14px;height:14px;float:left;color:#fff;font-size:10px;text-align:center;line-height:14px;font-family:Verdana;background:#bbb;display:inline;margin:0 5px 0 0;cursor:pointer;border:1px solid #a9abaa;}

.but li.hove {background:#ff902a;border:1px solid #ff6502;}

</style>

<script type="text/javascript">

function $(id){

    return typeof id === "string" ? document.getElementById(id) : id;

}

function $$(oParent, elem){

    return (oParent || document).getElementsByTagName(elem);

}

function $$$(oParent, sClass){

    var aElem = $$(oParent, '*');

    var aClass = [];

    var i = 0;

    for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);

    return aClass;

}

function Slide(){

    this.initialize.apply(this, arguments);

}

Object.extend = function(destination, source){

    for (var property in source) {

        destination[property] = source[property];

    }

    return destination;

};

Slide.prototype = {

    initialize : function(obj, list, but, hove, onEnd){

        if($(obj)){

            this.obj = $(obj);

            this.oList = $$$(this.obj, list)[0];

            this.oUl = $$(this.oList, 'ul')[0];

            this.aList = $$(this.oList, 'li');

            this.aListH = this.aList[0].offsetHeight;

            this.aListW = this.aList[0].offsetWidth;

            this.oBut = $$$(this.obj, but)[0];

            this.aBut = $$(this.oBut, 'li');

            this.oEve(onEnd);

            this.oAction = this.onEnd.action;

            this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click";

            this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play";

            if(this.oAction == 'top'){

                this.oUl.style.height = this.aListH * this.aList.length +'px';

            }else if(this.oAction == 'left'){

                this.oUl.style.width = this.aListW * this.aList.length +'px';

            }else if(this.oAction == 'opacity'){

                this.oUl.style.height = this.aListH +'px';

                var i = 0;

                for(i=0;i<this.aList.length;i++){

                    this.aList[i].style.position = 'absolute';

                    this.aList[i].className = 'opacity';

                }

                this.aList[0].className = '';

            }else{

                this.oUl.style.height = this.aListH * this.aList.length +'px';

            }

            this.getEvent(hove);

        }

    },

    oEve: function(onEnd){

        this.onEnd = {

            method : 'click',

            autoplay: 'stop'

        };

        Object.extend(this.onEnd, onEnd || {});

    },

    addEvent : function(oElm, strEvent, fuc) {

        window.addEventListener ? oElm.addEventListener(strEvent, fuc, false) : oElm.attachEvent('on' + strEvent, fuc);

    },

    getEvent : function(hove) {

        var _this = this;

        var i = iNow = 0;

        for(i=0;i<this.aBut.length;i++){

            (function(){

                var j = i;

                _this.addEvent(_this.aBut[j], _this.method, function(){

                    _this.fnClick(j, hove);

                    _this.autoPlayTab(j, hove);

                });

            })();

        }

        this.autoPlayTab(i, hove);

    },

    autoPlayTab : function(iNow, hove){

        if(this.autoplay == 'play'){

            var _this = this;

            this.iNow = iNow;

            this.obj.onmouseover = function(){

                clearInterval(_this.timer);

            };

            this.obj.onmouseout = function(){

                clearInterval(_this.timer);

                _this.timer = setInterval(playTab,3000);

            };

            clearInterval(_this.timer);

            _this.timer = setInterval(playTab,3000);

            function playTab(){

                if(_this.iNow == _this.aBut.length)_this.iNow = 0;

                _this.fnClick(_this.iNow, hove);

                _this.iNow++;

            }

        }

    },

    fnClick : function(oBut, hove){

        var i = 0;

        for(i=0;i<this.aBut.length;i++)this.aBut[i].className = '';

        this.aBut[oBut].className = hove;

        if(this.oAction == 'top'){

            this.sMove(this.oUl, {top:-(this.aListH * oBut)});

        }else if(this.oAction == 'left'){

            this.sMove(this.oUl, {left:-(this.aListW * oBut)});

        }else if(this.oAction == 'opacity'){

            var i = 0;

            for(i=0;i<this.aList.length;i++){

                this.sMove(this.aList[i], {opacity:0});

            }

            this.sMove(this.aList[oBut], {opacity:100});

        }else{

            this.sMove(this.oUl, {top:-(this.aListH * oBut)});

        }

    },

    getStyle : function(obj, attr)

    {

        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];

    },

    sMove : function(obj, json, onEnd){

        var _this = this;

        clearInterval(obj.timer);

        obj.timer = setInterval(function(){

            _this.dMove(obj, json, onEnd);

        },30);

    },

    dMove : function(obj, json, onEnd){

        this.attr = '';

        this.bStop = true;

        for(this.attr in json){

            this.iCur = 0;            

            this.attr == 'opacity' ? this.iCur = parseInt(parseFloat(this.getStyle(obj, this.attr))*100) : this.iCur = parseInt(this.getStyle(obj, this.attr));

            this.iSpeed = (json[this.attr] - this.iCur) / 7;

            this.iSpeed = this.iSpeed > 0 ? Math.ceil(this.iSpeed) : Math.floor(this.iSpeed);            

            if(json[this.attr] != this.iCur)this.bStop = false;

            if(this.attr == 'opacity'){

                obj.style.filter = 'alpha(opacity:' + (this.iCur + this.iSpeed) +')';

                obj.style.opacity = (this.iCur + this.iSpeed ) / 100;

            }else{

                obj.style[this.attr] = this.iCur + this.iSpeed + 'px';

            }

        }

        if(this.bStop){

            clearInterval(obj.timer);            

            if(onEnd)onEnd();

        }

    }

};

</script>

<script type="text/javascript"> 

window.onload = function(){

    new Slide('box', 'list', 'but', 'hove', {action : 'opacity'});

    new Slide('box1', 'list', 'but', 'hove', {method : 'mouseover', action : 'top', autoplay : 'play'});

    new Slide('box2', 'list', 'but', 'hove', {action : 'left', autoplay : 'play'});

    new Slide('box3', 'list', 'but', 'hove', {action : 'opacity', autoplay : 'play'});

};

</script>

</head>

<body>

<div class="frame">

    <div class="box" id="box">

        <div class="list">

            <ul>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/01.png" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/02.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/03.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/04.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/05.jpg" /></li>

            </ul>

        </div>

        <div>

        <div class="but">

            <ul>

                <li class="hove">1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

            </ul>

        </div>

        </div>

    </div>

    <div class="box" id="box1">

        <div class="list">

            <ul>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/01.png" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/02.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/03.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/04.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/05.jpg" /></li>

            </ul>

        </div>

        <div>

        <div class="but">

            <ul>

                <li class="hove">1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

            </ul>

        </div>

        </div>

    </div>

    <div class="box" id="box2">

        <div class="list">

            <ul>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/01.png" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/02.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/03.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/04.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/05.jpg" /></li>

            </ul>

        </div>

        <div>

        <div class="but">

            <ul>

                <li class="hove">1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

            </ul>

        </div>

        </div>

    </div>

    <div class="box" id="box3">

        <div class="list">

            <ul>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/01.png" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/02.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/03.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/04.jpg" /></li>

                <li><img src="http://www.codefans.net/jscss/demoimg/201109/05.jpg" /></li>

            </ul>

        </div>

        <div>

        <div class="but">

            <ul>

                <li class="hove">1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

            </ul>

        </div>

        </div>

    </div>

</div>

</body>

</html>

仿淘宝js图片切换的更多相关文章

基于jQuery仿淘宝产品图片放大镜代码
今天给大家分享一款基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...
基于jQuery仿淘宝产品图片放大镜特效
在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...
jquery.elevateZoom实现仿淘宝看图片，一张小的，一张大用于鼠标经过时候显示
实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用ele ...
【原创smarty仿淘宝商品图片轮播+放大镜效果】
1.去掉图片集字段,字符串的多余字符 $goods_pic_display=$row[DISPLAY];$goods_pic_display1=str_replace('"', '', $g ...
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
JS 仿淘宝幻灯片非完整版小案例
仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...
JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
原生js仿淘宝手机购买选项代码
这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...

随机推荐

PHP 注册树模式
/** * 注册树模式 * 将对象注册到一个类中 * 通过该类实现全局访问操作对象 */ class Tree { private static $treeList = []; private fun ...
Android 高手进阶之自定义View，自定义属性（带进度的圆形进度条）
Android 高手进阶(21) 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...
每一个可以移动的棋子都要移动——Every-SG 游戏
先看一个问题 HDU 3595 GG and MM (Every_SG博弈) 题目有N个游戏同时进行,每个游戏有两堆石子,每次从个数多的堆中取走数量小的数量的整数倍的石子.取最后一次的获胜.并且N个游 ...
linux 后台执行命令
本文主要内容: 1. 设置ctontab文件,并用它来提交作业. 2. 使用at命令来提交作业. 3. 在后台提交作业. 4. 使用nohup命令提交作业. 名词解释: cron 系统调度进程.可以使 ...
hiho_1059_string matching content length
题目大意两个字符串strA和strB(长度最大为2100),他们中按照顺序有一些公共的子串,且公共子串的长度大于等于3,否则不认为是合法的,比如 abcdef 和 abcxcdef, 按照顺序有合法 ...
phalcon: 视图集成（内嵌模板）
当一个网站把不同的模板分割成:头部,中间区域,底部时,我们就需要在不同的[中间区域]页面引入相同的头部跟底部.引入有2种方法, 一种是:在controller中调用: $this->view-& ...
与MySQL的零距离接触 - 慕课网
课程链接:与MySQL的零距离接触环境配置: windows下安装mysql Download MySQL Installer for windows 课程目录第1章初涉MySQL 1- ...
PC-1500的代码存入WAV文件
目录第1章保存 1 1.1 操作 1 1.2 波形说明 4 1.3 波形整形 5 1.4 压缩 8 第2章载入 9 2.1 操作 9 2.2 音量 9 ...
从别人那淘的知识深入剖析Java中的装箱和拆箱
(转载的海子的博文海子:http://www.cnblogs.com/dolphin0520/) 深入剖析Java中的装箱和拆箱自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来 ...
第一堂java web课
一天的课程上完,虽然很累,但是因为自己的收获,所以我很开心. 第一节课老师带我们大家学习了HTML,学了很多标签,比如:html,head,body <html></html> ...

仿淘宝js图片切换

仿淘宝js图片切换的更多相关文章

随机推荐

热门专题