时尚前沿的图片左右滚动效果-1

1.静态模板

<div id="Cont">                 
                 <!--滚动区域开始-->
                 <div class="Scroll">
                     <img src="images/1.jpg"/>
                     <div class="txt_1"></div>
                     <div class="txt_2">
                        <h3>大咖嘉宾登台献艺 Etam内衣秀火辣上演</h3>
                        <p>更有国际知名艺术家登台献艺，说唱女歌手Eve、美国流行歌手Azealia Banks...等现场演唱，音乐声效妖娆动人，
                           结合了美妙的灯光舞美，Etam内衣秀火辣上演。</p>
                     </div>
                 </div>

                      <div class="Scroll">
                     <img src="images/1.jpg"/>
                     <div class="txt_1"></div>
                     <div class="txt_2">
                        <h3>大咖嘉宾登台献艺 Etam内衣秀火辣上演</h3>
                        <p>更有国际知名艺术家登台献艺，说唱女歌手Eve、美国流行歌手Azealia Banks...等现场演唱，音乐声效妖娆动人，
                           结合了美妙的灯光舞美，Etam内衣秀火辣上演。</p>
                     </div>
                 </div>

                      <div class="Scroll">
                     <img src="images/1.jpg"/>
                     <div class="txt_1"></div>
                     <div class="txt_2">
                        <h3>大咖嘉宾登台献艺 Etam内衣秀火辣上演</h3>
                        <p>更有国际知名艺术家登台献艺，说唱女歌手Eve、美国流行歌手Azealia Banks...等现场演唱，音乐声效妖娆动人，
                           结合了美妙的灯光舞美，Etam内衣秀火辣上演。</p>
                     </div>
                 </div>

                 <!--滚动区域结束->
                 
                 <!--固定区域开始-->
                      <a href="#" class="ScrL"></a>
                      <a href="#" class="ScrR"></a>
                      
                      <img src="images/banner.png" class="banner"/>
                 <!--固定区域结束-->
                 
         </div>

css

        *{margin:0px;padding: 0px;}
        body{font-size: 12px;} 
        #Cont{width: 1000px; height: 590px;position: relative;float:left;}        
        #Cont .Scroll{width: 1000px; height: 580px;background: green;position: relative;}
        #Cont .txt_1{width: 850px; height: 140px; background:black;position: absolute; left: 80px; top: 400px;
                     filter: alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;}
        #Cont .txt_2{width: 680px; height: 140px; position: absolute; left: 240px; top: 400px;
                     color: #fff;font-family: "微软雅黑";}    
        #Cont .txt_2 h3{font-size: 30px;font-weight: normal;padding-top: 20px;padding-bottom: 10px;}
        #Cont .txt_2 p{line-height: 25px;ont-size: 14px;}    

        #Cont .ScrL{width: 39px; height: 72px; background-image: url("images/dirL1.png");display: block; position: absolute; left: 20px;
                       top: 200px;}    
        #Cont a.ScrL:hover{background-image: url("images/dirL2.png");}    
        
        #Cont .ScrR{width: 39px; height: 72px; background-image: url("images/dirR1.png");display: block; position: absolute; right: 20px;                        top: 200px;}    
        #Cont a.ScrR:hover{background-image: url("images/dirR2.png");}    
        
        #Cont .banner{position: absolute;left: 20px; top: 375px;}