css 图片切换模版

最新推荐文章于 2024-07-16 19:35:54 发布

蒋光明123

最新推荐文章于 2024-07-16 19:35:54 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/sdfsdfytre/article/details/87181793

版权

本文汇总了包括淘宝网4种JS幻灯焦点图、经典图片切换、从两侧向中间拼合的效果以及百度的图片切换特效在内的五种图片切换方案，详细介绍了每一种效果的实现方法。

摘要由CSDN通过智能技术生成

（1）淘宝网4种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(/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));