用Jquery做图片轮播

àì夳堔傛蜴生んèń 2022-07-28 06:29 257阅读 0赞

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        div\{  
            margin: 0 auto;  
            width: 770px;  
            height: 300px;  
            position: relative;  
            overflow: hidden;  
        \}  
    </style>  
    <script src="js/jquery-1.12.2.js"></script>                   //应用一个jQuery的文件  
</head>  
<body>  
<input type="button" value="纯js轮播效果" οnclick="setTimeout(imgmove, 2000)"/>  
  
使用jquery实现div内部的图片移动并消失，类似轮播效果  
<div id="divimg">  
    <img id="img7"  src="images/ad7.jpg" alt="广告"/>  
    <img id="img6"  src="images/ad6.jpg" alt="广告"/>  
    <img id="img5"  src="images/ad5.jpg" alt="广告"/>  
    <img id="img4"  src="images/ad4.jpg" alt="广告"/>  
    <img id="img3"  src="images/ad3.jpg" alt="广告"/>  
    <img id="img2"  src="images/ad2.jpg" alt="广告"/>  
    <img id="img1"  src="images/ad1.jpg" alt="广告"/>  
</div>  
<br/><br/><br/><br/><br/><br/><br/><br/><br/>  
<script>  
    function imgmove()\{  
        //使用循环来使每张图片按顺序进行移动，移动的时间设置为300毫秒  
        $("\#divimg img").each(function(i)\{  
            //使用自定义动画来使每张图片都进行平移  
            $(this).animate(\{  
                left:parseInt($(this).css("left"))+770  
            \},300,"swing",function()\{  
                //移动完毕后执行判断，如果向右移出了可见范围，则重新到最左边排序  
                if(parseInt($(this).css("left"))>=770)\{  
                    $(this).css("left",6\*(-770)+"px");  
                \}  
            \});  
        \});  
        //移动完毕后再次调用函数，但是时间间隔必须把移动所使用的时间也要计算在内  
        setTimeout(imgmove, 2300);  
    \}  
    $(function()\{  
        //页面加载完成后将图片设置样式和坐标  
        $("\#divimg img").css("position","absolute").each(function(i)\{  
            $(this).css("left",i\*(-770)+"px");  
        \});  
    \});  
</script>  
</body>  
</html>