欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

记录一下自己用jQuery写的轮播图

程序员文章站 2022-05-12 20:01:50
一个背景图,两个动画图片,写的不好,但是效果能实现;本人认为写效果一定先要布局好,不然的话效果实现起来可能会复杂;如果布局一目了然,效果实现起来思路就会清晰很多。 附上使用的一组图片 bj1.jpg; con1.png; text1.png ......
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <style type="text/css">
            
            *{
                margin: 0;
                padding: 0;
            }
            ul li {
                list-style: none;
            }
            
            #main {
                width: 760px;
                height: 300px;
                position: relative;
                margin: 50px auto;
                overflow: hidden;
            }
            
            #main .pic {
                width: 760px;
                height: 300px;
                
                overflow: hidden;
            }
            #main .pic ul li {
                width: 760px;
                height: 300px;
                position: relative;
                
            }
            #main .pic ul li .img1 {
                position: absolute;
                top: 0;
                left: -760px;
            }
            #main .pic ul li .img2 {
                position: absolute;
                top: 0;
                left: -20px;
                display: none;
            }
            #main .nav {
                position: absolute;
                right: 20px;
                bottom: 20px;
            }
            #main .nav ul li {
                width: 10px;
                height: 10px;
                border: 1px solid #fff;
                float: left;
                margin-left: 5px;
            }
            #main .nav ul li.select{
                background: #fff;
            }
            #main span{
                display: block;
                position: absolute;
                height: 50px;
                width: 30px;
                color: #fff;
                background: #000;
                opacity: 0.3;
                font-size: 24px;
                line-height: 50px;
                text-align: center;
                cursor: pointer;
            }
            .left{
                left: -30px;
                top: 50%;
                margin-top: -25px;
            }
            .right{
                right: -30px;
                top: 50%;
                margin-top: -25px;
            }
        </style>
        
    </head>
    <body>
        
        <div id="main">
            <div class="pic">
                <ul>
                    <li style="background: url(img/bg1.jpg);">
                        <img class="img1" src="img/text1.png"/>
                        <img class="img2" src="img/con1.png"/>
                    </li>
                    <li style="background: url(img/bg2.jpg);">
                        <img class="img1" src="img/text2.png"/>
                        <img class="img2" src="img/con2.png"/>
                    </li>
                    <li style="background: url(img/bg3.jpg);">
                        <img class="img1" src="img/text3.png"/>
                        <img class="img2" src="img/con3.png"/>
                    </li>
                    <li style="background: url(img/bg4.jpg);">
                        <img class="img1" src="img/text4.png"/>
                        <img class="img2" src="img/con4.png"/>
                    </li>
                    <li style="background: url(img/bg5.jpg);">
                        <img class="img1" src="img/text5.png"/>
                        <img class="img2" src="img/con5.png"/>
                    </li>

                </ul>
            </div>
            <div class="nav">
                <ul>
                    <li class="select"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <span class="left">〈</span>
            <span class="right">〉</span>
            
        </div>
        <div style="width: 100px; height: 100px; background: red; display: none;"></div>
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
        <script>
            $(function(){
                //初始第一张显示
                $(".pic li").eq(0).find(".img1").stop().animate({"left":"0"},1000)
                .next().show().stop().animate({"left":"0"},1000);
                var count = 0;
                //定义动画
                var move = function(){
                    count++;
                    if(count==$(".pic li").length){
                        count = 0;
                    }
                    donghua();
                }
                var donghua = function(){
                    $(".pic li").eq(count).fadein().find(".img1").stop()
                    .animate({"left":0},1000).next().show().stop()
                    .animate({"left":0},1000).parent().siblings().fadeout()
                    .find(".img1").stop().css({"left":"-760px"}).next()
                    .hide().stop().css({"left":"-20px"});

                    $(".nav li").eq(count).addclass("select").siblings()
                    .removeclass("select");
                }
                //定时器自动轮播
                var timer = setinterval(function(){
                    move();
                },2000)
                //点击相应的角标
                $(".nav li").click(function(){
                    var index = $(this).index();
                    count = index;
                    $(this).addclass("select").siblings().removeclass("select");
                    $(".pic li").eq(index).fadein().find(".img1").stop()
                    .animate({"left":0},1000).next().show().stop()
                    .animate({"left":0},1000).parent().siblings().fadeout()
                    .find(".img1").stop().css({"left":"-760px"}).next()
                    .hide().stop().css({"left":"-20px"});
                })
                //鼠标移入,清除定时器,左右按钮显示,移除开启定时器,左右按钮隐藏
                $("#main").hover(
                    function(){
                        clearinterval(timer);
                        $(".left").stop().animate({"left":0},500);
                        $(".right").stop().animate({"right":0},500);
                    },
                    function(){ 
                        timer = setinterval(function(){
                            move();
                        },2000)
                        $(".left").stop().animate({"left":"-30px"},500);
                        $(".right").stop().animate({"right":"-30px"},500);
                    }
                )
                //点击右侧按钮
                $(".right").click(function(){
                    count++;
                    if(count == $(".pic li").length){
                        count = 0;    
                    }
                    donghua();
                })
                //点击左侧按钮
                $(".left").click(function(){
                    count--;
                    if(count<0){
                        count = $(".pic li").length;
                    }
                    donghua();
                })
            })
        </script>
        
    </body>
</html>

一个背景图,两个动画图片,写的不好,但是效果能实现;本人认为写效果一定先要布局好,不然的话效果实现起来可能会复杂;如果布局一目了然,效果实现起来思路就会清晰很多。

附上使用的一组图片

bj1.jpg;

记录一下自己用jQuery写的轮播图

con1.png;

记录一下自己用jQuery写的轮播图

text1.png

记录一下自己用jQuery写的轮播图