Banner横幅广告轮播示范脚本

admin

Banner风格7
#HondyBanner{ display:inline-block; position:relative; width:970px; height:325px;}
#HondyBanner #Prev{ display:inline-block; width:60px; height:80px; top:130px; left:0; position:absolute; background:url(prev.png) no-repeat; cursor:pointer;}
#HondyBanner #Next{ display:inline-block; width:60px; height:80px; top:130px; right:0; position:absolute; background:url(next.png) no-repeat; cursor:pointer;}
#HondyBanner #Shower{ display:block; white-space:nowrap; height:325px; overflow:hidden;}
#HondyBanner img{ width:970px; height:325px;}

有了CSS范本，您只需要修改长宽，背景，字体及大小颜色，即可完成风格个性化，极大节约您的宝贵时间。
CSS范本可能有缺陷，可能代码不是最简化，也可能不是最高效率代码，欢迎指正。

admin

BANNER描述：
三帘翻动效果，底部圆形按纽随意切换图片，左右两侧Prev与Next按纽切换。

DIV代码：
样式8自动生成。
CSS示范脚本：
@import "../../../SysThemes/css/banner/BycSlider.css";

自适应定制注意事项：
#wowslider-container .ws_bullets { top:0; right: 0; }
#wowslider-container { overflow: hidden; zoom: 1; position: relative; width:100%; height:100%; margin:0 auto; z-index:100; }
#wowslider-container .ws_shadow { width:100%; background: url(header_bg.jpg) left 100%; height:30px; position: absolute; left:0; bottom:-30px; z-index:-1; }
#wowslider-container .ws_images { position: absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden; }
#wowslider-container .ws_images a { color:transparent; }
#wowslider-container .ws_images img { top:0; left:0; border:none 0; }
#wowslider-container a { text-decoration: none; outline: none; border: none; }
<!--top:calc(100% - 50px);这儿是关键，设计错误无法点击向右的箭头翻图片-->
#wowslider-container .ws_bullets { font-size: 0px; top:calc(100% - 50px); left:50%; float: left; position:absolute; z-index:70; }
#wowslider-container .ws_bullets div { position:relative; float:left; }
<!--text-indent: -9999px意在隐藏数字-->
#wowslider-container .ws_bullets a { margin-left:4px; width:8px; height:15px; background: url(bullet.png) left 50% no-repeat; float: left; text-indent: -9999px; position:relative; }
#wowslider-container .ws_bullets a.ws_selbull, #wowslider-container .ws_bullets a:hover { background-position: right 50%; }
#wowslider-container a.ws_next, #wowslider-container a.ws_prev { position:absolute; display:none; top:50%; margin-top:-28px; z-index:60; height: 62px; width: 38px; background-image: url(arrows.png); }
#wowslider-container a.ws_next { background-position: 100% 0; right:-8px; }
#wowslider-container a.ws_prev { left:-8px; background-position: 0 0; }
#wowslider-container a.ws_next:hover { background-position: 100% 100%; }
#wowslider-container a.ws_prev:hover { background-position: 0 100%; }
* html #wowslider-container a.ws_next, * html #wowslider-container a.ws_prev { display:block }
#wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev { display:block }
#wowslider-container .ws-title { position: absolute; bottom:50px; left: 0; margin-right:5px; z-index: 50; padding:12px; color: #F9FBFB; text-transform:uppercase; background:#000000; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 18px; }
#wowslider-container .ws-title div { padding-top:5px; font-size: 13px; text-transform:none; }
#wowslider-container .ws_bullets a img { text-indent:0; display:block; top:16px; left:-120px; visibility:hidden; position:absolute; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
#wowslider-container .ws_bullets a:hover img { visibility:visible; }
#wowslider-container .ws_bulframe div div { height:90px; overflow:visible; position:relative; }
#wowslider-container .ws_bulframe div { left:0; overflow:hidden; position:relative; width:240px; }
#wowslider-container .ws_bullets .ws_bulframe { display:none; top:20px; overflow:visible; position:absolute; cursor:pointer; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
#wowslider-container .ws_bulframe span { display:block; position:absolute; top:-11px; margin-left:-9px; left:120px; background:url(triangle.png); width:15px; height:6px; }

改造效果，纯CSS无图片

1. #wowslider-container .ws_bullets { top:0; right: 0; }
   
2. #wowslider-container { overflow: hidden; zoom: 1; position: relative; width:100%; height:100%; margin:0 auto; z-index:100; }
   
3. #wowslider-container .ws_shadow { width:100%; height:30px; position: absolute; left:0; bottom:-30px; z-index:-1; }
   
4. #wowslider-container .ws_images { position: absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden; }
   
5. #wowslider-container .ws_images a { color:transparent; }
   
6. #wowslider-container .ws_images img { top:0; left:0; border:none 0; }
   
7. #wowslider-container a { text-decoration: none; outline: none; border: none; }
   
8. #wowslider-container .ws_bullets { font-size: 0px; top:calc(100% - 50px); left:50%; float: left; position:absolute; z-index:70; }
   
9. #wowslider-container .ws_bullets div { position:relative; float:left; }
   
10. #wowslider-container .ws_bullets a { width:15px; height:15px; background: #9A0000; border:0; margin:6px; border-radius:10px; float: left; text-indent: -9999px; position:relative; }
    
11. #wowslider-container .ws_bullets a.ws_selbull, #wowslider-container .ws_bullets a:hover { background-color:#5A342B; border: 2px solid #fff; margin-top:6px;}
    
12. #wowslider-container a.ws_next, #wowslider-container a.ws_prev { position:absolute; display:none; top:50%; margin-top:-40px; z-index:60; height: 80px; width: 38px; background:#000; opacity: .2;}
    
13. #wowslider-container a.ws_next { right:20px; }
    
14. #wowslider-container a.ws_next:before{ float:left; width:0;height:0;content:"";border-left:20px solid #fff; border-top:20px solid transparent; border-bottom:20px solid transparent; margin-left:10px; margin-top: 20px;}
    
15. #wowslider-container a.ws_prev { left:20px;}
    
16. #wowslider-container a.ws_prev:before{ float:left; width:0;height:0;content:"";border-right:20px solid #fff; border-top:20px solid transparent; border-bottom:20px solid transparent; margin-left:8px; margin-top: 20px;}
    
17. #wowslider-container a.ws_next:hover { opacity: .8;}
    
18. #wowslider-container a.ws_prev:hover { opacity: .8;}
    
19. #wowslider-container a.ws_next, #wowslider-container a.ws_prev { display:block }
    
20. #wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev { display:block }
    
21. #wowslider-container .ws-title { position: absolute; bottom:50px; left: 0; margin-right:5px; z-index: 50; padding:12px; color: #F9FBFB; text-transform:uppercase; background:#000000; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 18px; }
    
22. #wowslider-container .ws-title div { padding-top:5px; font-size: 13px; text-transform:none; }
    
23. #wowslider-container .ws_bullets a img { text-indent:0; display:block; top:16px; left:-120px; visibility:hidden; position:absolute; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
    
24. #wowslider-container .ws_bullets a:hover img { visibility:visible; }
    
25. #wowslider-container .ws_bulframe div div { height:90px; overflow:visible; position:relative; }
    
26. #wowslider-container .ws_bulframe div { left:0; overflow:hidden; position:relative; width:240px; }
    
27. #wowslider-container .ws_bullets .ws_bulframe { display:none; top:20px; overflow:visible; position:absolute; cursor:pointer; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
    
28. #wowslider-container .ws_bulframe span { display:block; position:absolute; top:-11px; margin-left:-9px; left:120px; width:15px; height:6px; }

复制代码

模板(boblackstone)案例(boblackstone)

改造效果：

1. #wowslider-container .ws_bullets { top:0; right: 0; }
   
2. #wowslider-container { overflow: hidden; zoom: 1; position: relative; width:100%; height:100%; margin:0 auto; z-index:100; }
   
3. #wowslider-container .ws_shadow { width:100%; height:30px; position: absolute; left:0; bottom:-30px; z-index:-1; }
   
4. #wowslider-container .ws_images { position: absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden; }
   
5. #wowslider-container .ws_images a { color:transparent; }
   
6. #wowslider-container .ws_images img { top:0; left:0; border:none 0; }
   
7. #wowslider-container a { text-decoration: none; outline: none; border: none; }
   
8. #wowslider-container .ws_bullets { font-size: 0px; top:calc(100% - 50px); left:50%; float: left; position:absolute; z-index:70; }
   
9. #wowslider-container .ws_bullets div { position:relative; float:left; }
   
10. #wowslider-container .ws_bullets a { width:8px; height:8px; background:none; border:0; margin:3px; border-radius:6px; border: 1px solid #fff; float: left; text-indent: -9999px; position:relative; }
    
11. #wowslider-container .ws_bullets a.ws_selbull{ background-color:#27CAED; border: 1px solid transparent; width: 30px;}
    
12. #wowslider-container a.ws_next, #wowslider-container a.ws_prev { position:absolute; display:none; top:50%; margin-top:-40px; z-index:60; height: 80px; width: 38px; background:#000; opacity: .2;}
    
13. #wowslider-container a.ws_next { right:20px; }
    
14. #wowslider-container a.ws_next:before{ float:left; width:0;height:0;content:"";border-left:20px solid #fff; border-top:20px solid transparent; border-bottom:20px solid transparent; margin-left:10px; margin-top: 20px;}
    
15. #wowslider-container a.ws_prev { left:20px;}
    
16. #wowslider-container a.ws_prev:before{ float:left; width:0;height:0;content:"";border-right:20px solid #fff; border-top:20px solid transparent; border-bottom:20px solid transparent; margin-left:8px; margin-top: 20px;}
    
17. #wowslider-container a.ws_next:hover { opacity: .8;}
    
18. #wowslider-container a.ws_prev:hover { opacity: .8;}
    
19. #wowslider-container a.ws_next, #wowslider-container a.ws_prev { display:block }
    
20. #wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev { display:block }
    
21. #wowslider-container .ws-title { position: absolute; bottom:50px; left: 0; margin-right:5px; z-index: 50; padding:12px; color: #F9FBFB; text-transform:uppercase; background:#000000; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 18px; }
    
22. #wowslider-container .ws-title div { padding-top:5px; font-size: 13px; text-transform:none; }
    
23. #wowslider-container .ws_bullets a img { text-indent:0; display:block; top:16px; left:-120px; visibility:hidden; position:absolute; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
    
24. #wowslider-container .ws_bullets a:hover img { visibility:visible; }
    
25. #wowslider-container .ws_bulframe div div { height:90px; overflow:visible; position:relative; }
    
26. #wowslider-container .ws_bulframe div { left:0; overflow:hidden; position:relative; width:240px; }
    
27. #wowslider-container .ws_bullets .ws_bulframe { display:none; top:20px; overflow:visible; position:absolute; cursor:pointer; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
    
28. #wowslider-container .ws_bulframe span { display:block; position:absolute; top:-11px; margin-left:-9px; left:120px; width:15px; height:6px; }

复制代码

模板与案例：danqunaer

弘帝解脱您的大脑，无需编程，无需太多的学习，只需复制粘贴，无需读懂代码，只需略懂英文（比如width,height,background）即可。
做网站就是这么简单，赶快加入弘帝网页制作团队吧！

admin

BANNER描述：
快速淡入淡出效果，中底部矩形按纽可任意切换指定图片。

DIV:
样式9自动生成
JS:
<script lanugage=javascript src="SysThemes/js/hd_slider.js"></script>
CSS示范脚本：hdgy.css
.banner{ height:420px;}
.slide { position: relative; width:100%; }
.ban_c { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.ban_t { position: absolute; left: 0; bottom: 0; width: 100%; line-height: 20px; padding: 4px 0; text-indent: 10px; white-space: nowrap; overflow: hidden; color: #fff; background: #333; background: rgba(0,0,0,.5); z-index: 3; }
.ban_nav { position: absolute; bottom: 4px; left: 0; width: 100%; text-align: center; z-index: 4; }
.ban_c img { width: 100%; height: 100%; }
.ban_nav a { display: inline-block; vertical-align: middle; width: 12px; height: 12px; line-height: 14px; overflow: hidden; text-align: center; margin-left: 8px; cursor: pointer; text-decoration: none; font-size: 10px; -webkit-text-size-adjust: none; background: #ccc; text-indent:14px;}
.ban_nav .on { background: #f90; color: #fff; }
.Left, .Right { cursor: pointer; }

越来越多的BANNER效果呈现，免去您的编程烦恼，快速建站没有垃圾代码就是这么简单，只需复制粘贴，改改长宽背景字体颜色大小即可。

admin

Banner描述：
图片自动切换，并提供左右箭头键+底部方块黑色按纽手动切换图片

DIV：
样式10自动生成。
CSS参考：flexslider.css
.flexslider{position:relative;height:350px;overflow:hidden;background:url(loading.gif) 50% no-repeat; border-bottom:1px solid #dfdfdf;}
.flexslider ul{margin:0; padding:0; list-style:none;}
.slides{position:relative;z-index:1;}
.slides li{height:350px;}
.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center;}
.flex-control-nav li{display:inline-block;width:14px;height:14px;margin:0 5px;*display:inline;zoom:1;}
.flex-control-nav a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:#333;cursor:pointer; border-radius:10px;}
.flex-control-nav .flex-active{background:#db2039;}
.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;}
.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
.flex-direction-nav li a.flex-prev{left:40px;background:url(prev.gif) center center no-repeat;}
.flex-direction-nav li a.flex-next{right:40px;background:url(next.gif) center center no-repeat;}

admin

样式8改造，圆纽换成细横线：
#wowslider-container{ display: flex; justify-content: center; align-content: stretch;}
#wowslider-container { overflow: hidden; zoom: 1; position: relative; width:100%; height:100%; margin:0 auto; z-index:100; }
#wowslider-container .ws_shadow { width:100%; height:30px; position: absolute; left:0; bottom:-30px; z-index:-1; }
#wowslider-container .ws_images { position: absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden; }
#wowslider-container .ws_images a { color:transparent; }
#wowslider-container .ws_images img { top:0; left:0; border:none 0; width: 100%; height: 100%;}
#wowslider-container a { text-decoration: none; outline: none; border: none; }
#wowslider-container .ws_bullets { display: flex; justify-content: center; font-size: 0px; top:calc(100% - 50px); position:absolute; z-index:70; }
#wowslider-container .ws_bullets div { position:relative; display: inline-flex;}
#wowslider-container .ws_bullets a { width:40px; height:4px; background:#fff; border:0; margin:3px; float: left; text-indent: -9999px; position:relative; }
#wowslider-container .ws_bullets a.ws_selbull{ background-color:#27CAED; width: 40px;}
#wowslider-container a.ws_next, #wowslider-container a.ws_prev { position:absolute; display:none; top:50%; margin-top:-40px; z-index:60; height: 80px; width: 38px;}
#wowslider-container a.ws_next { right:20px; }
#wowslider-container a.ws_next:before{ float:left; width:0;height:0;content:"";border-left:20px solid #4D8CB2; border-top:20px solid transparent; border-bottom:20px solid transparent; margin-left:10px; margin-top: 20px; opacity: .5;}
#wowslider-container a.ws_prev { left:90px;}
#wowslider-container a.ws_prev:before{ float:left; width:0;height:0;content:"";border-right:20px solid #4D8CB2; border-top:20px solid transparent; border-bottom:20px solid transparent; margin-left:8px; margin-top: 20px; opacity: .5;}
#wowslider-container a.ws_next:hover { opacity: .8;}
#wowslider-container a.ws_prev:hover { opacity: .8;}
#wowslider-container a.ws_next, #wowslider-container a.ws_prev { display:block }
#wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev { display:block }
#wowslider-container .ws-title { position: absolute; bottom:50px; left: 0; margin-right:5px; z-index: 50; padding:12px; color: #F9FBFB; text-transform:uppercase; background:#000000; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 18px; }
#wowslider-container .ws-title div { padding-top:5px; font-size: 13px; text-transform:none; }
#wowslider-container .ws_bullets a img { text-indent:0; display:block; top:16px; left:-120px; visibility:hidden; position:absolute; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
#wowslider-container .ws_bullets a:hover img { visibility:visible; }
#wowslider-container .ws_bulframe div div { height:90px; overflow:visible; position:relative; }
#wowslider-container .ws_bulframe div { left:0; overflow:hidden; position:relative; width:240px; }
#wowslider-container .ws_bullets .ws_bulframe { display:none; top:20px; overflow:visible; position:absolute; cursor:pointer; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
#wowslider-container .ws_bulframe span { display:block; position:absolute; top:-11px; margin-left:-9px; left:120px; width:15px; height:6px; }

模板：qm1314