jquery 图片自动切换

最新推荐文章于 2022-11-10 08:56:30 发布

杨文寿

最新推荐文章于 2022-11-10 08:56:30 发布

阅读量6k

点赞数 3

分类专栏： JQuery

本文链接：https://blog.csdn.net/Tender001/article/details/8697033

版权

JQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>JQUERY实现图片自动切换</title>
<style>
body{margin:0px; padding:0px; font-family:Arial}
ul{list-style:none;margin:0px;padding:0px}
.click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; width:16px; background:#333; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer;_display:inline-block; }
.click_over{margin-left:5px; float:left;text-align:center; height:16px; line-height:16px; width:16px; background:#820000; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer; _display:inline-block; }
</style>
<script language="javascript" src="../Script/jquery-1.4.4.min.js"></script>
</head>
<body>
  <div style="height:230px; width:980px; background:#EBEBEB; position:relative" id="flash_outer">
     <div style=" position:absolute; left:0px; top:0px; width:980px; height:230px; overflow:hidden" id="flash_pic">
        <div style="width:980px; height:250px; background:url(flash_pic/1.jpg)"></div>
        <div style="width:980px; height:250px; background:url(flash_pic/2.jpg)"></div>
        <div style="width:980px; height:250px; background:url(flash_pic/3.jpg)"></div>
        <div style="width:980px; height:250px; background:url(flash_pic/4.jpg)"></div>
     </div>
     <ul style="position:absolute; right:0px; bottom:0px; height:16px" id="flash_num">
       <li class="click_over">1</li>
       <li class="click_out">2</li>
       <li class="click_out">3</li>
       <li class="click_out">4</li>
     </ul>
  </div>
<script language="javascript">
$(document).ready(function()
{
   var len=$("#flash_num>li").length;
   var index=1;
   var int;
   function showSys(num)  //图片切换函数
   {
    $("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");
    $("#flash_pic>div").fadeOut().eq(num).fadeIn();
   }
   function ziDong()  //自动切换
   {
    if(index==len)
    {
     index=0;
    }
    showSys(index);
    index=index+1;
   }
   int=setInterval(ziDong,3000);
   $("#flash_num>li").click(function(） //点击切换
   {
    var index_num=$("#flash_num>li").index(this);
    showSys(index_num);
    index=index_num+1;  //改变全局变量的值，以便鼠标移开的时候能够衔接上
    //$(".click_out").removeClass("click_over").eq(index).addClass("click_over");
    //$(".click_out").eq(index).removeClass().addClass("click_over");
       //alert(index);
   });
   $("#flash_outer").mouseover(function()  //移动到上面时停止自动切换
       {
        clearInterval(int);
       });
   $("#flash_outer").mouseout(function()  //移开时继续自动切换
       {
        int=setInterval(ziDong,3000);
       });
});
</script>
</body>
</html>

杨文寿

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 图片自动切换

JQUERY实现图片自动切换body{margin:0px; padding:0px; font-family:Arial}ul{list-style:none;margin:0px;padding:0px}.click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; wi
复制链接

扫一扫

专栏目录