zoukankan      html  css  js  c++  java
  • jquery轮播(自动+下标)

    主要是  要元旦了 事情多 所以就先发了   有不足的地方 请多指出。

    1、HTML

    <div class="slideBox" id="slideBox">
      <div class="btn">
        <span class="left"><</span>

        <span class="right">></span>
      </div>
      <div class="slide slide01">
        <a href="javascript:" class="pic"><img src="images/01.jpg"></a>
        <span class="txt"><a href="#">图片1</a></span>
      </div>
      <div class="slide slide02">
        <a href="javascript:" class="pic"><img src="images/02.jpg"></a>
        <span class="txt"><a href="#">图片2</a></span>
      </div>
      <div class="slide slide03">
        <a href="javascript:" class="pic"><img src="images/03.jpg"></a>
        <span class="txt"><a href="#">图片3</a></span>
      </div>
      <div class="slide slide04">
        <a href="javascript:" class="pic"><img src="images/04.jpg"></a>
        <span class="txt"><a href="#">图片4</a></span>
      </div>
      <div class="slide slide05">
        <a href="javascript:" class="pic"><img src="images/05.jpg"></a>
        <span class="txt"><a href="#">图片5</a></span>
      </div>
      <ul class="btns">
        <li class="current"><a href="javascript:">1</a></li>
        <li><a href="javascript:">2</a></li>
        <li><a href="javascript:">3</a></li>
        <li><a href="javascript:">4</a></li>
        <li><a href="javascript:">5</a></li>
      </ul>
    </div>

    2、CSS

    <style type="text/css">
      * {margin: 0; padding: 0;}
      a, a:link, a:visited {color:#333;}
      img {border: 0;}
      .slideBox {position: relative; margin: 0 auto; margin-top: 50px; 500px; height: 200px;}
      .slideBox .slide,
      .slideBox .slide a.pic,
      .slideBox .slide a.pic img { 500px; height: 200px;}
      .slideBox .slide {position: absolute; z-index: 0;}
      .slideBox .slide01 {z-index: 1;}
      .slideBox .slide a.pic,
      .slideBox .slide span.txt {display: block;}
      .slideBox .slide img {}
      .slideBox .slide span.txt {position: absolute; bottom: 0; left: 0; 500px; height: 40px; background: #000; filter: alpha(opacity: 60); background: rgba(0, 0, 0, 0.6); text-indent:   20px; line-height: 38px;}
      .slideBox .slide span.txt a {text-decoration: none; color: #fff; font: 16px arial;}
      .slideBox .slide span.txt a:hover {text-decoration: underline;}
      .slideBox .btns {position: absolute; list-style: none; bottom: 11px; right: 5px; z-index: 99999999;}
      .slideBox .btns li {float: left; margin-right: 5px; 18px; height: 18px; border: 0px solid #ccc; background: #666; text-align: center; font: 12px/20px arial;}
      .slideBox .btns li.current {background: #f33;}
      .slideBox .btns li a {text-decoration: none; display: block; color: #fff;}
      .slideBox .btn {z-index: 999;position: absolute; 500px;}
      .slideBox .btn span {background-color: #ccc;color: #ffffff;padding: 5px 12px;opacity: 0.5;}
      .slideBox .btn span.left {position: absolute;left: 0;top: 70px;}
      .slideBox .btn span.right {position: absolute;right: 0px;top: 70px;}
      .slideBox .btn span:hover{cursor: pointer;opacity: 0.8;color: #464646;}
    </style>

    jquery

    <script type="text/javascript">

      $(function(){

        function slide() {      

          var aSlides = $("#slideBox .slide");
          /* 获取每一个img */
          var aBtns = $("#slideBox .btns li");
          /*获取 每个li*/
          var timer = null;
          aBtns.each(function(index){
            aBtns[index].onmouseover = function () {
              clearInterval(timer); /* 清除 clearInterval */
              for (var j = 0; j < aSlides.length; j++) {
                aSlides[j].style.zIndex = 0;
                aBtns[j].className = "";
              }
              /* 循环 全部 zIndex 为 0 没有css */
              aBtns[index].className = "current";
              aSlides[index].style.zIndex = 1;
              /* 给鼠标移入时 添加 zIndex和css */
            }
            aBtns[index].onmouseout = function () {
              autoSlide(index); /* 传值下标 */
            }
          });
          function autoSlide(index){
            var index = index||0;
            /*判断 有没有 index , 有就赋值从赋值开始 、没有为0 为最开始下标 */
            timer = setInterval(function () {
              if (index >= aBtns.length) {
                index = 0;
              }
              /* 页面加载就轮播 index下标 大于等于 li 的长度时重置*/
              for (var i = 0, j = 0; i < aBtns.length, j < aSlides.length; i++, j++) {
                aBtns[i].className = "";
                aSlides[j].style.zIndex = 0;
              }
              aBtns[index].className = "current";
              aSlides[index].style.zIndex = 1;
              index++;
            }, 2000);
          }

        autoSlide();
      }
      slide();
    });

    </script>

    还有左右切换 由于时间问题和技术问题 没有解决就没有上传(解决了在上传)、或者有哪位帮忙写一下。谢谢

  • 相关阅读:
    Java实现各种内部排序算法
    Java实现堆排序(大根堆)
    Java对象的序列化和反序列化
    Java实现链式存储的二叉查找树(递归方法)
    337. House Robber III(包含I和II)
    318. Maximum Product of Word Lengths
    114. Flatten Binary Tree to Linked List
    106. Construct Binary Tree from Inorder and Postorder Traversal
    105. Construct Binary Tree from Preorder and Inorder Traversal
    96. Unique Binary Search Trees(I 和 II)
  • 原文地址:https://www.cnblogs.com/ice-ice/p/5088246.html
Copyright © 2011-2022 走看看