Часто сталкиваются с проблемой, что изображения деформированы после загрузки на задний план. Если ваш стиль веб -сайта подходит, вы можете использовать этот метод для расположения страницы, поддерживая любой размер скольжения изображения (вверх, вниз, влево и справа)
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> слайд любого размера </title> <style> div {margin: 0 auto; переполнение: hidden;}. main {width: 1000px;}. divmg_div1 {width: 380px; float: left;}. divmg .div4_title {width: 380px; Высота: 103px; фоновый цвет: #edb205; Цвет: #fff; Фондовая семья: «Microsoft Yahei»; размер шрифта: 22px; шрифт-вес: жирный шрифт; высота линии: 90px; Текст-альбом: Центр; СКАЖИ САМЕТ: 5px;}. Divimg_img1 {ширина: 380px; Высота: 414px; маржинальная версия: 5px; фоновый цвет: #fff; позиция: относительно;}. divimg_div2 {width: 615px; float: справа;}. divimg_img2 {width: 194px; Высота: 256px; Плавание: осталось; фоновый цвет: #fff; позиция: относительно;}. divimg_img3 {width: 417px; Высота: 256px; Поплавок: верно; фоновый цвет: #fff; позиция: относительно;}. divimg_img4 {width: 366px; Высота: 262px; Плавание: осталось; маржинальная версия: 4px; фоновый цвет: #fff; позиция: относительно;}. divimg_img5 {width: 245px; Высота: 262px; Поплавок: верно; маржинальная версия: 4px; фоновый цвет: #fff; позиция: относительно;}. Divimg .gif {position: Absolute; Слева: 50%; Верх: 50%; Мяглевая маржа: -50PX; маржинальная версия: -50px; z-index: 2;}. Divimg .img {position: Absolute; z-index: 1; слева: 0; Верх: 0; дисплей: none;} </style> <script src = "js/jquery-1.10.2.min.js"> </script> <script> $ (document) .ready (function (e) {$ (". Divimg.img"). load (function () {var w = parseint ($ (this). Hh = $ (this) .parent (). height (); var ww = $ (this) .parent (). left () {$ (this) .animate ({left :-( parseint (parseint (hh)/h*w)-(parseint (ww))}, 10000, справа)} функция правой () {$ (this) .animate ({left: 0}, 10000, слева);} функция top () {$ (this) .animate ({top :-( parseint (parseint (ww)/w*h)-(parseint (hh))}, 10000, внизу);} функция внизу () {$ (this) .Animate ({top: 0}, 10000, top);} if (blw> blh) {$ (this) .height (hh) .width (parseint (parseint (hh)/h*w)); $ (this) .prev (). Hide (); $ (this) .animate ({left :-( parseint (parseint (hh)/h*w)-(parseint (ww))}, 10000, справа);} else if (blw < blh) {$ (this) .height (parseint (parseint (ww)/w*h)). Ширина (ww); $ (this) .prev (). Hide (); $ (this) .css ({"z-index": "3", "di splay ":" block "}); $ (this) .animate ({top :- (Parseint (parseint (ww)/w*h)-(parseint (hh)))}, 10000, внизу);}}); $ (".. Div4 .img "). Каждый (функция (index, element) {$ (this) .attr (" src ", $ (this) .attr (" name "));});}); </script> </head> <body> <div> <div> <div> <div> Слайд любого размера </div> <div> <img src = "Images/loadding.gif"/> <img name = "Images/am_bigimg01.jpg" src = "/> </> </div> </div> <div> <iv> <img src ="/> </> </div> </div> <div> <iv> <img src = "/> </> </> </div> </diving> <div> <div> <img src ="/> name = "Images/am_nyimg01.jpg" src = ""/> </div> <div> <img src = "Images/loadding.gif"/> <img name = "Images/am_img02.jpg" src = "/> </div> <div> <img src =" Image/load.gif "/> </> </div> <div> <img src =" name = "Images/am_newimg01.jpg" src = ""/> </div> <div> <img src = "Images/load.gif"/> <img name = "Images/am_rynewimg03.jpg" src = ""/> </div> </div> </div> </div> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht>