jq 轮播效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轮播事件JQ</title>
</head>

<body>
<script type="text/javascript" src="jquery-1.11.1.min.js">


</script>
<style type="text/css">
ul, li {list-style: none;}
.zy_ctrl {width:150px;height:20px;line-height:20px;float:left;position:relative;top:7px;left:20px;}
.zy_prev {width:21px;height:19px;float:left;cursor:pointer;background-image:url(/eportal/fileDir/nyj/resource/cms/2013/07/2013072511525539456.gif);}
.zy_next {width:21px;height:19px;float:left;cursor:pointer;background-image:url(/eportal/fileDir/nyj/resource/cms/2013/07/next.gif);}
.zy_index { width: 108px;height: 20px;float: left;text-align: center;}
.zy_index span { display:inline-block; *display:inline;zoom:1; margin-right:8px;margin-top:6px; 
  width: 8px;
  height: 8px;
  border-radius: 50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;  
  background-color: #c3c3c3; 
  border: 1px solid #afafaf;  
  cursor:pointer;
 }
.zy_index span.active { background-color: #f90; border: 1px solid #ff7d00;}
.zy_warp { width: 308px;height: 110px;margin:0;padding:0;overflow: hidden;position: relative;}
ul.zy_links {width:308px;height:110px;margin:0;padding:0;}
ul.zy_links li {width:308px;height:110px;float: left;}
</style>
<div style="border:1px solid #ccc;margin-top:10px;">
<div style="308px;height:34px;line-height:34px;font-size:14px;font-weight:bold;text-indent:12px;background-color:#eaeaea;">
   <div style="float:left">这是一个轮播</div>
        <div class="zy_ctrl">
             <div class="zy_prev"></div>
             <div class="zy_index"> </div>
             <div class="zy_next"></div>
        </div>
</div>

    <div class="zy_warp">
        <ul class="zy_links">
            <li>
            <img alt="" src="/eportal/fileDir/nyj/resource/cms/2013/08/2013081017234052524.jpg" style=" 308px; height: 110px;"  />
            </li>
            <li><img alt="" border="0" src="/eportal/fileDir/nyj/resource/cms/2013/08/2013081017242847400.jpg" style=" 308px; height: 110px;" />
            </li>
            <li><img alt="" border="0" src="/eportal/fileDir/nyj/resource/cms/2013/08/2013081017245375744.jpg" style=" 308px; height: 110px;"  />
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
      var num = $('.zy_links').find('li').length;
      var liWid = $('.zy_links li').width(); 
      var slideWid = num*liWid;
      
      var current = 0;
      for (var i = 0; i < num; i++) {
        $('.zy_index').append('<span></span>');
      };
      
      $('.zy_index').find('span').eq(0).addClass('active');
      $('.zy_links').width(slideWid);
      
      function zySlide () {
        $('.zy_links').animate({"marginLeft":-liWid*current});
        $('.zy_index').find('span').eq(current).addClass('active').siblings().removeClass('active');
      }
      $('.zy_next').click(function(){
              current++;
               if (current >= num) {
                current = 0;
               };
               zySlide();
      });
      
      
      $('.zy_prev').click(function(){
               current--;
            if (current < 0) {
             current = num-1;
            };
               zySlide();
      });
      $('.zy_index').find('span').click(function(){
               current = $(this).index();
                zySlide();
      });
      
      setInterval(autoSlide,6000);
      function autoSlide(){
                current++;
        if (current >= num) {
              current = 0;
        };
                zySlide();
      }
  });
</script>

</body>
</html>

相关阅读:
九度OJ 1014：排名（排序）
九度OJ 1013：开门人和关门人（排序）
九度OJ 1012：畅通工程（最小生成树）
Java高级工程师（一）
FastJson JSON对象及JavaBean之间的相互转换
 webservice 和 RESTful API 接口调用
 [转] jqGrid 属性事件合集
 Jqgrid 事件重新设置行数据，以及 Thymeleaf js下获取model的值
 mybatis配置文件说明--- 注重顺序
 美丽的for循环语句
原文地址：https://www.cnblogs.com/yjhua/p/4623542.html