图片轮播插件实现-优快云博客

本文链接：https://blog.youkuaiyun.com/SunLiNanBK/article/details/52303859

本文介绍了一款基于jQuery的图片轮播插件实现方法，包括HTML结构搭建、CSS样式设置及JavaScript交互逻辑。该插件支持自动播放、手动切换等功能。

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

<!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;}
        #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;}
        
        .indexList{position: absolute;bottom: 5px;z-index: 30;}
        .indexList li{float: left;padding: 2px 4px;}
        .indexList .indexOn{color: red;}
    </style>
</head>
<body>
<center>
<h1><font color="red">轮播图显示</font></h1></center>
<div id="wrapper"><!-- 最外层部分 -->
    <div id="banner"><!-- 轮播部分 -->
        <ul class="imgList"><!-- 图片部分 -->
           
                <li>
                  <img src="" alt="" height="" width="ss"/>
                </li>
                
        </ul>
       
        <ul class="indexList"><!-- 图片右下角序号部分 -->
           <pre name="code" class="php">           <li class="indexOn">1</li>          <pre name="code" class="php">           <li>2</li> 
<pre name="code" class="php"><pre name="code" class="php"><pre name="code" class="php">          <li>3</li>

</ul> </div></div><script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.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); },5000); //对右下角按钮index进行事件绑定处理等 $(".indexList").find("li").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); },2000); } function changeTo(num){ 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>

简单的轮播图代码