用jQuery实现焦点图轮播（底部是小圆点）

最新推荐文章于 2022-05-09 15:14:20 发布

java_zhaoyanli

最新推荐文章于 2022-05-09 15:14:20 发布

阅读量7.9k

点赞数

分类专栏： myWork--

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/52087565

版权

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

本文详细介绍了如何使用jQuery库创建一个带有底部小圆点导航的焦点图轮播效果，包括图片切换、小圆点动态更新及交互功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-size:14px;"><!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 type="text/css">
        body, div, ul, li, a, img {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #wrapper {
            position: relative;
            margin: 30px auto;
            width: 400px;
            height: 200px;
        }

        #banner {
            position: relative;
            width: 400px;
            height: 200px;
            overflow: hidden;
        }

        .imgList {
            position: relative;
            width: 2000px;
            height: 200px;
            z-index: 10;
            overflow: hidden;
        }

            .imgList li {
                float: left;
                display: inline;
            }

        #prev,
        #next {
            position: absolute;
            top: 80px;
            z-index: 20;
            cursor: pointer;
            opacity: 0.2;
            filter: alpha(opacity=20);
        }

        #prev {
            left: 10px;
        }

        #next {
            right: 10px;
        }

            #prev:hover,
            #next:hover {
                opacity: 0.5;
                filter: alpha(opacity=50);
            }

      

       

       <span style="color:#CC0000;"> #indexList {
            position: absolute;
            right: 145px;
            height:10px;
            width:100px;
            bottom: 20px;
            z-index: 30;
        }

        #indexList span{
            cursor:pointer;
            float: left;
            border:1px solid #fff;
            width:10px;height:10px;
            border-radius:50%;
            background:#fff;
            margin-right:5px;
           
        }
        #indexList .indexOn {
            background:#011F53;
            width:13px;
            height:13px;
            margin-top:-1px;
        }</span>
        .imgList li .conList,.conList2,.conList3,.conList4,.conList5 {
            width:400px;
            height:200px;
            background:#ccc;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <!-- 最外层部分 -->
        <div id="banner">
            <!-- 轮播部分 -->
            <ul class="imgList">
                <!-- 图片部分 -->
                <li style="display:block" width="400px" height="200px" ><a href="#"><div class="conList">这是第一页的内容</div></a></li>
                <li style="display:block" width="400px" height="200px"><a href="#"><div class="conList2" style="background:yellow">这是第2页的内容</div></a></li>
                <li style="display:block" width="400px" height="200px"><a href="#"><div class="conList3">这是第3页的内容</div></a></li>
                <li style="display:block" width="400px" height="200px"><a href="#"><div class="conList4">这是第4页的内容</div></a></li>
                <li style="display:block" width="400px" height="200px"><a href="#"><div class="conList5">这是第5页的内容</div></a></li>
            </ul>
           
            
            <span style="color:#CC0000;"><div id="indexList">
                <!-- 图片右下角序号部分 -->
                    <span index="1" class="indexOn"></span>
                    <span index="2"></span>
                    <span index="3"></span>
                    <span index="4"></span>
                    <span index="5"></span>
               
            </div></span>
        </div>
    </div>
    <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
  var curIndex = 0, //当前index
      imgLen = $(".imgList li").length; //图片总数
     // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){
    if(curIndex < imgLen-1){
      curIndex ++;
    }else{
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex);
    showButton();
  },2500);
   //左箭头滑入滑出事件处理
  $("#prev").hover(function(){
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){
    //滑出则重置定时器
      autoChangeAgain();
      showButton();
  });
  //左箭头点击处理
  $("#prev").click(function(){
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });
  //右箭头滑入滑出事件处理
  $("#next").hover(function(){
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){
    //滑出则重置定时器
      autoChangeAgain();
      showButton();
  });
  //右箭头点击处理
  $("#next").click(function(){
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });
  //对右下角按钮index进行事件绑定处理等
  $("#indexList").find("span").each(function(item){
    $(this).hover(function(){
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){
      autoChangeAgain();
    });
  });
  //清除定时器时候的重置定时器--封装
  function autoChangeAgain(){
      autoChange = setInterval(function(){
      if(curIndex < imgLen-1){
        curIndex ++;
      }else{
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex);
    },2500);
    }
  function changeTo(num){
    var goLeft = num * 400;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $("#indexList").find("span").removeClass("indexOn").eq(num).addClass("indexOn");
  }
  var buttons = document.getElementById('buttons').getElementsByTagName('span');

<span style="color:#CC0000;">//小圆点
  function showButton() {
      for (var i = 0; i < buttons.length ; i++) {
          if (indexList[i].className == 'indexOn') {
              indexList[i].className = '';
              break;
          }
      }
    
  }
</span>
    </script>
</body>
</html></span>