带有叠加css问题的图像滑块

Question

所以我有一个图像滑块，它工作得非常好，但需要淡化代码：

<div id="slider-wrapper" style="margin-top: 100px;">

        <div id="slider">

        <div class="sp" style="background:url(http://topwalls.net/wallpapers/2012/11/Wallpaper-Rays-Color-Black-Background-1024x1024.jpg); width: 980px; height: 340px; padding-top: 120px; paddin-bottom: 20px; margin-top: -40px; margin-bottom: 0px;">
        <div style="float: left; background:rgba(255,255,255, 0.9);  padding-left: 40px; padding-top: 30px; padding-bottom: 20px; width: 450px; height: 165px; z-index: 99999; margin-top: 100px;">
        <h1 style="font-size: 28pt;">
        <?php include("profileuserdata.php"); ?>
        </li>
        </ul>
        </div>   
        </div>

        <div class="sp" style="background:url(http://www.whitegadget.com/attachments/pc-wallpapers/136911d1367472699-scenery-scenery-pics-1920x1200.jpg); width: 980px; height: 340px; padding-top: 120px; paddin-bottom: 20px; margin-top: -40px; margin-bottom: 0px;">
        <div style="float: left; background:rgba(255,255,255, 0.9);  padding-left: 40px; padding-top: 30px; padding-bottom: 20px; width: 450px; height: 165px; z-index: 99999; margin-top: 100px;">
        <h1 style="font-size: 28pt;">
        <?php include("profileuserdata.php"); ?>
        </li>
        </ul>
        </div>
        </div>

       <div class="sp" style="background:url(http://www.bhmpics.com/walls/beautyful_scenery-wide.jpg); width: 980px; height: 340px; padding-top: 120px; paddin-bottom: 20px; margin-top: -40px; margin-bottom: 0px;">
        <div style="float: left; background:rgba(255,255,255, 0.9);  padding-left: 40px; padding-top: 30px; padding-bottom: 20px; width: 450px; height: 165px; z-index: 99999; margin-top: 100px;">
        <h1 style="font-size: 28pt;">
        <?php include("profileuserdata.php"); ?>
        </li>
        </ul>
        </div>
        </div>

        <div class="sp" style="background:url(http://upload.wikimedia.org/wikipedia/commons/f/f2/Hvalba_scenery.jpg); width: 980px; height: 340px; padding-top: 120px; paddin-bottom: 20px; margin-top: -40px; margin-bottom: 0px;">
        <div style="float: left; background:rgba(255,255,255, 0.9);  padding-left: 40px; padding-top: 30px; padding-bottom: 20px; width: 450px; height: 165px; z-index: 99999; margin-top: 100px;">
        <h1 style="font-size: 28pt;">
        <?php include("profileuserdata.php"); ?>
        </li>
        </ul>
        </div>
        </div>

        </div>
        </div>

所以我试图只使用位于滑块顶部的div一次，但是当图像滚动到下一个时我需要是一个常量但是看起来坐在顶部的div必须加载它每一次。