5.图片循环播放

css

/* http://www.zhinengshe.com/ - coding: leo - QQ: 20907961 - time: 2010/8/28 */

* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }

body { background: #ecfaff; }

.box { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; background: #ccc; }
.box ol { position: absolute; left: 200px; bottom: 5px; z-index: 2; }
.box ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
.box .active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }

.box ul { position: absolute; top: 0; left: 0; z-index: 1; }
.box ul li { width: 470px; height: 150px; float: left; }
.box ul img { float: left; width: 470px; height: 150px; }

.box p { width: 20px; height: 20px; line-height: 20px; font-family: arial; color: #fff; text-align: center; font-weight: bold; background: #333; border: 1px solid #ccc; position: absolute; top: 60px; z-index: 2; cursor: pointer; }
.box .prev { left: 10px; }
.box .next { right: 10px; }
.xxx{
    position: absolute;
    left: -470px;
}

query

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯片左右滑动效果 - leo</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src='../jquery-3.6.0.js'></script>

</head>

<body>

<div class="box" id="play">
    <p class="prev">&laquo;</p>
    <p class="next">&raquo;</p>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
    </ul>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("ol li").click(function(){
            // 点击的在当前后面  
            if($(this).index() > $("ol li[class=active]").index()){
                $("ul li").eq($("ol li[class=active]").index()).css({'position': 'absolute'}).stop().animate({"left":"-470px"});
                $("ul li").eq($(this).index()).css({'position': 'absolute','left':"470px"}).stop().animate({"left":"0px"});
            }
            else if($(this).index() < $("ol li[class=active]").index()){
                $("ul li").eq($("ol li[class=active]").index()).css({'position': 'absolute'}).stop().animate({'left':'470px'});
                $("ul li").eq($(this).index()).css({'position': 'absolute','left':"-470px"}).stop().animate({'left':'0px'});
            }
            $(this).addClass("active").siblings().removeClass("active");          
        })
        $(".prev").click(function(){
            if($("ol li[class=active]").index() == 0){
                $("ul li").eq(0).css({'position': 'absolute'}).stop().animate({"left":"470px"});
                $("ul li").eq(4).css({'position': 'absolute','left':"-470px"}).stop().animate({"left":"0px"});
            }
            else{
                $("ul li").eq($("ol li[class=active]").index()).css({'position': 'absolute'}).stop().animate({"left":"470px"});
                $("ul li").eq($("ol li[class=active]").index()).prev().css({'position': 'absolute','left':"-470px"}).stop().animate({"left":"0px"})
            }
            
            if($("ol li[class=active]").index()==0){
                $("ol li").eq(0).removeClass("active");
                $("ol li").eq(4).addClass("active")
            }
            else{
                $("ol li[class=active]").removeClass("active").prev().addClass("active")
            }
        })
        $(".next").click(function(){
            if($("ol li[class=active]").index() == 4){
                $("ul li").eq(4).css({'position': 'absolute'}).stop().animate({"left":"-470px"});
                $("ul li").eq(0).css({'position': 'absolute','left':"470px"}).stop().animate({"left":"0px"});
            }
            else{
                $("ul li").eq($("ol li[class=active]").index()).css({'position': 'absolute'}).stop().animate({"left":"-470px"});
                $("ul li").eq($("ol li[class=active]").index()).next().css({'position': 'absolute','left':"470px"}).stop().animate({"left":"0px"})
            }
            if($("ol li[class=active]").index()==4){
                $("ol li").eq(4).removeClass("active");
                $("ol li").eq(0).addClass("active")
            }
            else{
                $("ol li[class=active]").removeClass("active").next().addClass("active")
            }

        })
    })
</script>
</body>
</html>

实现

 

 

 

posted @ 2021-08-26 19:38  轻痕微凉  阅读(59)  评论(0)    收藏  举报