Tip: you can modify some code before running
Js controllable display with thumbnail image switching effect<!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><title>Js controllable display with thumbnail image switching effect</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">Body {margin: 0; font-size: 12px ;}. container {width: 1000px; margin: 0 auto ;}. middle {background: url (yun_qi_img/index_middle.jpg) no-repeat; height: 152px; overflow: hidden;} img {border: 0;} ul, li {list-style: none; margin: 0; padding: 0 ;}. slider {width: 960px; position: relative; height: 95px; margin: 0px 20px; padding: 28px 0 ;}. slider. sliderContent {height: 138px; width: 900px; margin: 0 auto; overflow: hidden ;}. slider. sliderLeft {width: 29px; height: 46px; position: absolute; left: 0; top: 48px; display: block; background: url (yun_qi_img/index11_06.jpg) no-repeat; text-indent:-9999px; outline: none ;}. slider. sliderRight {width: 29px; height: 138px; position: absolute; right: 0; top: 48px; display: block; background: url (yun_qi_img/index11_08.jpg) no-repeat; text-indent:-9999px; outline: none ;}. slider. sliderContent. sliderScroll {width: Pixel px ;}. slider. sliderContent. sliderScroll ul li {float: left; display: inline; width: 86px; height: 89px; overflow: hidden; margin: 0 10px; background: url (yun_qi_img/pic_bg_s.png) no-repeat; padding: 6px 38px 0 6px; overflow: hidden; _ background: none; _ filter: progid: DXImageTransform. microsoft. alphaImageLoader (enabled = 'true', src = 'Images/pic_bg_s.png ', sizingMethod = 'scale'); cursor: pointer ;}. slider. sliderContent. sliderScroll ul li img {width: 119px; height: 84px ;}. lightBox {height: 581px; position: absolute; z-index: 100; width: 1000px ;}. lightBox. logo {background: url (yun_qi_img/logo.gif) no-repeat; width: 85px; height: 95px; position: absolute; left: 774px; top: 0px; z-index: 101 ;}. lightBoxBg {background: url (yun_qi_img/mask.gif) no-repeat bottom; height: 581px ;}. lightBoxContent {position: absolute; bottom: 80px; left: 185px; z-index: 102; padding: 6px 0 0 6px; background: url (yun_qi_img/pic_bg_ B .png) no-repeat; _ background: none; _ filter: progid: DXImageTransform. microsoft. alphaImageLoader (enabled = 'true', src = 'Images/pic_bg_ B .png '); width: 648px; height: 372px;} # lightImageInfo {position: absolute; left: 192px; bottom: 50px ;}. lightBoxContent img {/* _ padding: 6px 0 0 0px; */width: 618px; height: 360px ;}. close {position: absolute; width: 30px; height: 30px; overflow: hidden; top: 132px; right: 160px; background: url (yun_qi_img/close.gif) no-repeat; text-indent:-9999px; z-index: 1000 ;}# loading {width: 80px; height: 80px; background: url (yun_qi_img/loading.gif) # fff no-repeat centerposition: absolute; z-index: 103; left: Pixel px; top: 265px ;}# lightImageInfo {margin: 5px 0; padding: 0; color: # fff; font-weight: bold; line-height: 20px ;}</style><script language="javascript" type="text/javascript" src="yun_qi_img/notfound.jpg" id="lightImg" /> <!--<p id="lightImageInfo"></p>--> </div> <p id="lightImageInfo"></p> </div> <div class="top"></div> <div class="middle"> <div class="slider" id="slider">Left and Right<div class="sliderContent"> <div class="sliderScroll"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div> </div></div></body></html>
Tip: you can modify some code before running