怎么实现当前模块循环特效轮播，最好两侧再加箭头，新手求指导！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.yuangong { height:639px ; background-color:#e4e4e4; margin:auto 80px;}
.yuangong .yuangongtit { padding:45px 0px 40px;}
.yuangong .yuangongcont ul li { float:left; background-image:url(../images/yuangongbj.jpg); height:215px;; width:219px; margin:10px 9px;}
.yuangong .yuangongcont ul li img { height:100%; width:100%}
.yuangong .yuangongcont ul li:nth-child(even) { width:320px; height:196px; font-family:"微软雅黑";font-size:16px; text-align:left; padding:10px 8px; background-color:#FFF;}
.yuangong .yuangongcont ul li:hover{ box-shadow:0px 0px 1px 1px #94390D;;}
</style>
</head><body><div class="yuangong">
<div class="wrap">
  <div class="yuangongcont">
    <ul>
      <li><a href=""><img src="{zzz:tempath}images/shili1.jpg" /></a></li>
      <li><a href="">介绍</a></li>
      <li><a href=""><img src="{zzz:tempath}images/shili1.jpg" /></a></li>
      <li><a href="">介绍</a></li>
      <li><a href=""><img src="{zzz:tempath}images/shili1.jpg" /></a></li>
      <li><a href="">介绍</a></li>
      <li><a href=""><img src="{zzz:tempath}images/shili1.jpg" /></a></li>
      <li><a href="">介绍</a></li>
    </ul>
  </div>
 </div>
</div>
</body>
</html>

解决方案 »

  1.   

    建议unslider 插件,几KB 简单配置一下就行
    http://www.bootcss.com/p/unslider/
      

  2.   


        window.onload = function ()    
       {    
           var oUl = document.getElementById ('ul1');    
           var t,o;    
           var speed = 0;    
           var funny = function ()    
           {    
               t && clearInterval(t);    
               t = setInterval (function ()    
               {    
                    speed -= 200/11;    
                    if(speed<-200){    
                        speed=0;    
                        oUl.appendChild (oUl.children[0]);    
                        t && clearInterval(t);    
                        t = null;    
                        o && clearTimeout(o);    
                        o=setTimeout(funny,500);    
                        }    
                   oUl.style.left = speed + "px";    
               }, 60);    
           }    
            funny ();    
       } 
      

  3.   

    大神，是当前页面的8个<li>一起轮播
      

  4.   

    下载slick插件,导入js、css包。
    $('.yuangong').slick({
            centerPadding: '1px',
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: false,
            centerMode: false,
        });
    可以看看我的两篇博客。第二篇是调插件
    http://blog.csdn.net/qq_31915745/article/details/71746918
    http://blog.csdn.net/qq_31915745/article/details/71611261
      

  5.   

    swiper：http://www.swiper.com.cn/
    coin-slider  http://jqcool.net/jquery-coinslider.html大把效果