时尚前沿的图片左右滚动效果-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;}
