用jQuery实现广告轮播的效果

最新推荐文章于 2023-12-08 15:24:23 发布
java_zhaoyanli
最新推荐文章于 2023-12-08 15:24:23 发布
阅读量7.1k
点赞数
分类专栏： myWork--
myWork-- 专栏收录该内容
59 篇文章 1 订阅
订阅专栏
<span style="font-size:18px;"><!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>图片轮播 jq(左右切换)</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);
            }
         //最底部遮罩层的背景
        .bg {
            position: absolute;
            bottom: 0;
            width: 400px;
            height: 40px;
            z-index: 20;
            opacity: 0.4;
            filter: alpha(opacity=40);
            background: black;
        }
        //图片左下角文字信息部分
        .infoList {
            position: absolute;
            left: 10px;
            bottom: 10px;
            z-index: 30;
        }

            .infoList li {
                display: none;
            }
          
            .infoList .infoOn {
                display: inline;
                color: white;
            }
         //图片右下角序号部分
        .indexList {
            position: absolute;
            right: 10px;
            bottom: 5px;
            z-index: 30;
        }

            .indexList li {
                float: left;
                margin-right: 5px;
                padding: 2px 4px;
                border: 2px solid black;
                background: grey;
                cursor: pointer;
            }

            .indexList .indexOn {
                background: red;
                font-weight: bold;
                color: white;
            }
    </style>
</head>
<body>
    <div id="wrapper">
        <!-- 最外层部分 -->
        <div id="banner">
            <!-- 轮播部分 -->
            <ul class="imgList">
                <!-- 图片部分 -->
                <li><a href="#"><img src="./img/1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
                <li><a href="#"><img src="./img/2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
                <li><a href="#"><img src="./img/1.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
                <li><a href="#"><img src="./img/1.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
                <li><a href="#"><img src="./img/1.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
            </ul>
            <img src="./img/lf.png" width="20px" height="40px" id="prev">
            <img src="./img/rt.png" width="20px" height="40px" id="next">
            <div class="bg"></div> <!-- 图片底部背景层部分-->
            <ul class="infoList">
                <!-- 图片左下角文字信息部分 -->
                <li class="infoOn">puss in boots1</li>
                <li>puss in boots2</li>
                <li>puss in boots3</li>
                <li>puss in boots4</li>
                <li>puss in boots5</li>
            </ul>
            <ul class="indexList">
                <!-- 图片右下角序号部分 -->
                <li class="indexOn">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
    <span style="color:#CC0000;"><script type="text/javascript" src="jquery-1.8.1.min.js"></script></span>
    <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;
    }
    //调用变换处理函数
    <span style="background-color: rgb(255, 255, 204);">changeTo(curIndex)</span>;
  },2500);
   //左箭头滑入滑出事件处理
  $("#prev").hover(function(){
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){
    //滑出则重置定时器
   <span style="background-color: rgb(204, 255, 255);"> autoChangeAgain();</span>
  });
  //左箭头点击处理
  $("#prev").click(function(){
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });
  //右箭头滑入滑出事件处理
  $("#next").hover(function(){
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){
    //滑出则重置定时器
    autoChangeAgain();
  });
  //右箭头点击处理
  $("#next").click(function(){
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });
  //对右下角按钮index进行事件绑定处理等
  $(".indexList").find("li").each(function(item){
    $(this).hover(function(){
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){
      autoChangeAgain();
    });
  });
  //清除定时器时候的重置定时器--封装
  function <span style="background-color: rgb(204, 255, 255);">autoChangeAgain()</span>{
      autoChange = setInterval(function(){
      if(curIndex < imgLen-1){
        curIndex ++;
      }else{
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex);
    },2500);
    }
  function <span style="background-color: rgb(255, 255, 204);">changeTo(num)</span>{
    var goLeft = num * 400;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }
    </script>
</body>
</html></span>