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

1.静态模板

 1 <div id="Cont">                 
 2                  <!--滚动区域开始-->
 3                  <div class="Scroll">
 4                      <img src="images/1.jpg"/>
 5                      <div class="txt_1"></div>
 6                      <div class="txt_2">
 7                         <h3>大咖嘉宾登台献艺 Etam内衣秀火辣上演</h3>
 8                         <p>更有国际知名艺术家登台献艺，说唱女歌手Eve、美国流行歌手Azealia Banks...等现场演唱，音乐声效妖娆动人，
 9                            结合了美妙的灯光舞美，Etam内衣秀火辣上演。</p>
10                      </div>
11                  </div>
12 
13                       <div class="Scroll">
14                      <img src="images/1.jpg"/>
15                      <div class="txt_1"></div>
16                      <div class="txt_2">
17                         <h3>大咖嘉宾登台献艺 Etam内衣秀火辣上演</h3>
18                         <p>更有国际知名艺术家登台献艺，说唱女歌手Eve、美国流行歌手Azealia Banks...等现场演唱，音乐声效妖娆动人，
19                            结合了美妙的灯光舞美，Etam内衣秀火辣上演。</p>
20                      </div>
21                  </div>
22 
23                       <div class="Scroll">
24                      <img src="images/1.jpg"/>
25                      <div class="txt_1"></div>
26                      <div class="txt_2">
27                         <h3>大咖嘉宾登台献艺 Etam内衣秀火辣上演</h3>
28                         <p>更有国际知名艺术家登台献艺，说唱女歌手Eve、美国流行歌手Azealia Banks...等现场演唱，音乐声效妖娆动人，
29                            结合了美妙的灯光舞美，Etam内衣秀火辣上演。</p>
30                      </div>
31                  </div>
32 
33                  <!--滚动区域结束->
34                  
35                  <!--固定区域开始-->
36                       <a href="#" class="ScrL"></a>
37                       <a href="#" class="ScrR"></a>
38                       
39                       <img src="images/banner.png" class="banner"/>
40                  <!--固定区域结束-->
41                  
42          </div>

css

 1         *{margin:0px;padding: 0px;}
 2         body{font-size: 12px;} 
 3         #Cont{width: 1000px; height: 590px;position: relative;float:left;}        
 4         #Cont .Scroll{width: 1000px; height: 580px;background: green;position: relative;}
 5         #Cont .txt_1{width: 850px; height: 140px; background:black;position: absolute; left: 80px; top: 400px;
 6                      filter: alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;}
 7         #Cont .txt_2{width: 680px; height: 140px; position: absolute; left: 240px; top: 400px;
 8                      color: #fff;font-family: "微软雅黑";}    
 9         #Cont .txt_2 h3{font-size: 30px;font-weight: normal;padding-top: 20px;padding-bottom: 10px;}
10         #Cont .txt_2 p{line-height: 25px;ont-size: 14px;}    
11 
12         #Cont .ScrL{width: 39px; height: 72px; background-image: url("images/dirL1.png");display: block; position: absolute; left: 20px;
13                        top: 200px;}    
14         #Cont a.ScrL:hover{background-image: url("images/dirL2.png");}    
15         
16         #Cont .ScrR{width: 39px; height: 72px; background-image: url("images/dirR1.png");display: block; position: absolute; right: 20px;                        top: 200px;}    
17         #Cont a.ScrR:hover{background-image: url("images/dirR2.png");}    
18         
19         #Cont .banner{position: absolute;left: 20px; top: 375px;}