js代码实现轮播效果

最新推荐文章于 2022-07-06 17:17:56 发布

Brianhjj

最新推荐文章于 2022-07-06 17:17:56 发布

阅读量376

点赞数

分类专栏： js

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="<%= request.getContextPath() %>/common/nui/nui.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
         var timer = '';
         var branch_len = $('.branch li').length;
         var branch_img_len = $('.branch img').width();
         var branch_img_count_len = parseInt(branch_len * branch_img_len);

         $(".next").click(function(){
             if(!$(".branch li:first").is(":animated")){
                 $(".branch li:first").animate({'marginLeft':'-=550px'},500,function(){
                     $(".branch li:first").css('marginLeft',0);
                     $('.branch').append($(".branch li:first"));
                 });
             }
         });

         $(".prev").click(function(){
             if(!$(".branch li:first").is(":animated")){
                 $('.branch').prepend($(".branch li:last"));
                 $('.branch li:first').css({'marginLeft':'-550px'});
                 $(".branch li:first").animate({'marginLeft':'+=550px'},500,function(){
                     $(".branch li:first").css('marginLeft','0px');
                 });
             }
         });

         timer = setInterval(function(){
             $(".next").click();
         },2000);

         $(".branch_bar").mouseenter(function(){
             clearInterval(timer);
         });

         $(".branch_bar").mouseleave(function(){
             timer = setInterval(function(){
                 $(".next").click();
             },2000)
         });
     });
    </script>
    <style type="text/css">
     *{
      margin:0 auto;
      padding:0;
  }
  ul{
      list-style-type:none;
      }
  img{
      border:0;
      }
  .branch_bar{
      width:550px;
      height:220px;
      overflow:hidden;
      position:relative;
      }
  .branch_bar .branch{
      width:3000px;
      }
  .branch_bar .branch li{
      float:left;
      }
  .branch_bar .branch li img{
      width:550px;
      height:220px;
      }
  .prev{
      position:absolute;
      top:100px;
      left:10px;
      color:#fff;
      cursor:pointer;
      }
  .next{
      position:absolute;
      top:100px;
      right:10px;
      color:#fff;
      cursor:pointer;
      }
    </style>
</head>
<body>
<div class="branch_bar">
     <ul class="branch">
         <li><a href="#" title=""><img src="images/icon_20.png"></a></li>
         <li><a href="#" title=""><img src="images/icon_47.png"></a></li>
         <li><a href="#" title=""><img src="images/icon_48.png"></a></li>
         <li><a href="#" title=""><img src="images/icon_49.png"></a></li>
     </ul>

</div>
<span class="prev">«向左滚动</span>
<span class="next">向右滚动»</span>
<script type="text/javascript">
    nui.parse();

    </script>
</body>
</html>

Brianhjj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js代码实现轮播效果

&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww
复制链接

扫一扫