Frequentemente, encontre o problema de que as imagens são deformadas após serem carregadas no plano de fundo. Se o estilo do seu site for adequado, você poderá usar esse método para fazer o layout da página, suportando qualquer tamanho de deslizamento de imagem (para cima, para baixo, para a esquerda e direita)
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> slide de qualquer tamanho </title> <stylem> div {margin: 0 auto; Overflow: Hidden;}. Main {Width: 1000px;}. Divmg_div1 {Width: 380px; float: esquerda;}. divmg .div4_title {width: 380px; Altura: 103px; Background-Color: #EDB205; Cor: #FFF; Fonte-família: "Microsoft Yahei"; Size da fonte: 22px; Peso da fonte: negrito; altura da linha: 90px; Alinhamento de texto: centro; Espacamento de letas: 5px;}. divimg_img1 {width: 380px; Altura: 414px; Margin-top: 5px; Background-Color: #FFF; Posição: relativa;}. divimg_div2 {largura: 615px; float: direita;}. divimg_img2 {width: 194px; Altura: 256px; flutuar: esquerda; Background-Color: #FFF; Posição: relativa;}. divimg_img3 {largura: 417px; Altura: 256px; Float: Certo; Background-Color: #FFF; Posição: relativa;}. divimg_img4 {largura: 366px; Altura: 262px; flutuar: esquerda; Margin-top: 4px; Background-Color: #FFF; Posição: relativa;}. divimg_img5 {largura: 245px; Altura: 262px; Float: Certo; Margin-top: 4px; Background-Color: #FFF; Posição: relativa;}. Divimg .gif {Posição: Absolute; Esquerda: 50%; TOP: 50%; margem -esquerda: -50px; Margin -top: -50px; Z-Index: 2;}. Divimg .img {Posição: Absolute; Z-Index: 1; Esquerda: 0; topo: 0; Exibir: nenhum;} </style> <script src = "js/jQuery-1.10.2.min.js"> </sCript> <cript> $ (document) .ready (function (e) {$ (". hh = $ (this) .Parent (). Height (); var ww = $ (this) .Parent (). width (); var blw = w/parseint (ww); var BlH = h/parseint (hh); função; esquerda () {$ (this) .animate ({esquerda :-( parseint (parseint (hh)/h*w)-(parseint (ww)))}, 10000, direita)} função direita () {$ (this) .animate ({esquerda: 0}, 10000, esquerda);} função top () {$ (this) .animate ({top :-( parseint (parseint (ww)/w*h)-(parseint (hh)))}, 10000, inferior);} função inferior () {$ (this) .animate ({top: 0}, 10000, top);} se (blw> BLH) {$ (this) .Height (hh) .Width (parsent (parsent (hh)/h*w)); $ (this) .prev (). hide (); $ (this) .animate ({esquerda :-( parseint (parseint (hh)/h*w)-(parseint (ww)))}, 10000, à direita);} else if (blw < BLH) {$ (this) .Height (parseint (parseint (ww)/w*h)). largura (ww); $ (this) .prev (). hide (); $ (this) .css ({"z-index": "3", "Di splay ":" bloco "}); $ (this) .animate ({top :-( parseint (parseint (ww)/w*h)-(parseint (hh)))}, 10000, inferior);}}); $ (". Div4 .img "). cada (função (índice, elemento) {$ (this) .attr (" src ", $ (this) .attr (" nome "));});}); </script> </ad Head> <body> <div> <div> <div> <div> slide de qualquer tamanho </div> <div> <img src = "imagens/loadding.gif"/> <img name = "imagens/am_bigimg01.jpg" src = "/> </div> </div. <div> <divg01.jpg" src = "/> </div> </div.> <div> <divg01.jpg" src = "/> </////Div name = "Images/am_nyimg01.jpg" src = ""/> </div> <div> <img src = "imagens/loadding.gif"/> <img name = "imagens/am_img02.jpg" src = "/> </div> <div> <MG sc =" imagens/carreging.filding. name = "imagens/am_newimg01.jpg" src = ""/> </div> <div> <img src = "imagens/loadding.gif"/> <img name = "imagens/am_rynewimg03.jpg" src = ""/> </div> </div> </hiv> </hiv>