之前找了好多banner滚动轮播效果,都感觉代码太多,一个简单的小效果js写了一大堆,我实在不想费那劲在一行行去看跟修改了,于是就简单的整理出了简洁型的滚动轮播,虽然鼠标经过时不会停止,不过我后续会把这个效果加上的!

如下代码:


 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>简洁代码实现banner轮播</title>
 <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
 <style type="text/css">
 .clearfix{overflow:hidden; clear:both; margin: 0; padding: 0;}
 .imgbox{width:640px; margin:0 auto; text-align:center; }
 .imgbox ul#bannerimg{padding:0px; margin:0px;}
 .imgbox ul#bannerimg li{float:left; list-style:none; width: 100%; height: 300px;line-height: 300px; color: white;}
 .imgbox ul#bannerimg li.select{display:block;}
 .imgnum span{border-radius:50%; font:normal normal 12px 微软雅黑; color:white; margin-left:5px; padding:2px 6px 2px 6px; background-color: orange; cursor:pointer;}
 .imgnum span.default{background-color:red;}
 .imgnum{text-align:center; float:right; margin:-30px 30px; position:relative;}
 </style>
 </head>
 <body>
 <div class="imgbox">
 <ul id="bannerimg">
 <li style="background: salmon;">这里面没有图所以我用背景颜色代替</li>
 <li style="background: orange;">这里面没有图所以我用背景颜色代替</li>
 <li style="background: greenyellow;">这里面没有图所以我用背景颜色代替</li>
 <li style="background: cyan;">这里面没有图所以我用背景颜色代替</li>
 </ul>
 <div class="clearfix"></div>
 <div class="imgnum">
 <span class="default">1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 </div>
 </div>
 <script type="text/javascript">
   var win = 1,time = "";
   $(function () {
   showimg(win); //鼠标移入移出
   $(".imgnum span").hover(function () {
     clearTimeout(time);
     var icon=$(this).text();
     $(".imgnum span").removeClass("default").eq(icon-1).addClass("default"); //当图片对应焦点显示时,按钮添加颜色样式
     $("#bannerimg li").hide().stop(true,true).eq(icon-1).fadeIn("slow"); //当鼠标指中相应按钮时获取焦点,停止切换焦点图
   }, function () {
     win=$(this).text()> 3 ? 1 :parseInt($(this).text())+1;
     time = setTimeout("showimg(" + win + ")", 2000);
   });
   });function showimg(num) {
     win = num;
     $(".imgnum span").removeClass("default").eq(win-1).addClass("default");
     $("#bannerimg li").hide().stop(true,true).eq(win-1).fadeIn("slow");
     win = win + 1 > 4 ? 1 : win + 1;
     time = setTimeout("showimg(" + win + ")", 2000);
   }
 </script>
 </body>
 </html>

[demo]http://demo.skillcat.me/jquery/banner-scrolling-one/index.html[/demo]

如果效果出来比较慢,就换成本地引用Jquery文件,li 里面加图片,背景去掉,可以自由修改宽高。

技术成就梦想,细节成就品质。