css - 具有覆盖 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 每次都必须加载它。