jquery implements simple banner carousel effect [Example]

jquery implements simple banner carousel effect [Example]_jquery

WBOY

Release： 2016-05-16 15:07:16

Original

1316 people have browsed it

A friend showed me a carousel effect. I downloaded the js and took a look. Such a simple effect of Yaya can be written in hundreds of lines. It seriously affects the loading speed of the browser. I thought that people have broadband Traffic is free to play. . In desperation, I wrote a simple one for him. All the codes did not exceed 70 lines, and there was also the CSS with rounded corners. Not every browser has rounded corners, but it does not affect the appearance, hehe.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>无标题页</title>
  <script src="js/jquery-2.1.4.js" type="text/javascript"></script>
  <style type="text/css">
    .clear{overflow:hidden; clear:both; width:0px; height:0px; }
    .imgbox{width:640px; margin:0 auto; text-align:center; }
    ul{padding:0px; margin:0px;}
    ul li{float:left; list-style:none; }
    ul li.select{display:block;}
    .imgnum span{border-radius:10px; font:normal normal bold 12px/15px 微软雅黑; color:#FFF; margin-left:5px; padding:3px 6px 3px 6px; background-color:#F90; cursor:pointer;}
    .imgnum span.onselect{background-color:#F00;}
    .imgnum{text-align:center; float:right; margin:-30px 30px; position:relative;}
  </style>
</head>
<body>
  <div class="imgbox">
      <ul id="banner_img">
        <li><img src="images/banner1.jpg"/></li>
        <li><img src="images/banner2.jpg"/></li>
        <li><img src="images/banner3.jpg"/></li>
        <li><img src="images/banner4.jpg"/></li>
        <li><img src="images/banner5.jpg"/></li>
      </ul>
  <div class="clear"></div>
  <div class="imgnum">
    <span class="onselect">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</div>
<script type="text/javascript">
     var time = "";
     var index = 1;
     $(function () {
       showimg(index);
       //鼠标移入移出
       $(".imgnum span").hover(function () {
        clearTimeout(time);
        var icon=$(this).text();
        $(".imgnum span").removeClass("onselect").eq(icon-1).addClass("onselect");
        $("#banner_img li").hide().stop(true,true).eq(icon-1).fadeIn("slow");
       }, function () {
        index=$(this).text()> 4 &#63; 1 :parseInt($(this).text())+1;
        time = setTimeout("showimg(" + index + ")", 3000);
       });
     });
 
     function showimg(num) {
       index = num;
       $(".imgnum span").removeClass("onselect").eq(index-1).addClass("onselect");
       $("#banner_img li").hide().stop(true,true).eq(index-1).fadeIn("slow");
       index = index + 1 > 5 &#63; 1 : index + 1;
       time = setTimeout("showimg(" + index + ")", 3000);
     }
  </script>
</body>
</html>

Copy after login

Be sure to quote the Jquery file. I won’t upload the image. You can replace it yourself. Pay attention to the length and width of the image.

The rendering is as follows:

The above jquery implementation of a simple banner carousel effect [example] is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.