简单的轮播图

最新推荐文章于 2023-10-04 14:11:52 发布

艳妮子Yeah

最新推荐文章于 2023-10-04 14:11:52 发布

阅读量614

点赞数 1

分类专栏： jquery javascript

本文链接：https://blog.csdn.net/wangxiuyan0228/article/details/80741585

版权

javascript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

以下代码均需引入jquery，并自行修改图片

一、点击左右箭头进行滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击左右箭头进行滑动</title>
    <script type="text/javascript" src="jquery-1.12.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
        function scrolls(){
            $(".content").animate({"left":"-1920px"},400,function(){
                $(this).css("left","0px").children().last().after($(this).children().first());

            });
        }
        var scro=setInterval(scrolls,2000);

        $("#banner").mouseenter(function(){
            clearInterval(scro);
            $(this).children("img").stop(true,true).fadeIn(400);
        }).mouseleave(function(){
            scro=setInterval(scrolls,2000);
            //名称必须与前面定义的setinterval保持一致，否则视为重新定义一个seterval从而加快轮播速度
            $(this).children("img").stop(true,true).fadeOut(400);
        });
        $("#banner .right").click(function(){
           $(".content").animate({"left":"-1920px"},400,function(){
                $(this).css("left","0px").children().last().after($(this).children().first());

            });
        });
        $("#banner .left").click(function(){
           $(".content").animate({"left":"0px"},400,function(){
                $(this).css("left","-1920px").children().first().before($(this).children().last());

            });
        })
    });
    </script>
    <style type="text/css">
    *{
        margin:0 auto;
        }
    #banner{
        width:100%;
        height:450px;
        overflow:hidden;
        position:relative;
        }
    #banner div.show{
        width:1920px;
        overflow:hidden;
        height:450px;
        position:absolute;
        left:50%;
        margin-left:-960px;
        top:0px;
        z-index:1;
        }
    #banner div.show div.content{
        width:5760px;
        height:450px;
        margin:0px;
        position:relative;/*必须加上定位，否则animate不起作用*/
        left:-1920px;
        }
    #banner div.show div.content img{
        width:1920px;
        height:450px;
        margin:0px;
        float:left;
        }
    #banner img.left{
        position:absolute;
        z-index:10;
        left:0px;
        top:50%;
        margin-top:-50px;
        display:none;
        }
    #banner img.right{
        position:absolute;
        z-index:10;
        right:0px;
        top:50%;
        margin-top:-50px;
        display:none;
        }
    </style>
</head>
<body>
	<div id="banner">
    	<div class="show">
        	<div class="content"><img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg"></div>
        </div>
        <img src="img/2.gif" class="left">
        <img src="img/1.gif" class="right">
    </div>
</body>
</html>

二、点击tab进行切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击tab进行切换</title>
    <style type="text/css">
    *{
        margin:0 auto;
        }
    #banner{
        width:100%;
        height:450px;
        overflow:hidden;
        position:relative;
        }
    #banner div.show{
        width:1920px;
        overflow:hidden;
        height:450px;
        position:absolute;
        left:50%;
        margin-left:-960px;
        top:0px;
        z-index:1;
        }
    #banner div.show img{
        width:1920px;
        height:450px;
        margin:0px;
        }
    #banner #but{
        list-style-type:none;
        position:absolute;
        bottom:10px;
        width:210px;
        left:50%;
        margin-left:-145px;
        z-index:20;
        }
    #banner ul li{
        font-size:14px;
        font-weight:bold;
        float:left;
        width:30px;
        height:30px;
        border-radius:15px;
        background:#fff;
        margin:20px;
        line-height:30px;
        text-align:center;
        opacity:0.5;
        }
    #but li.highlight{
        opacity:1;
        }
    </style>
    <script type="text/javascript" src="jquery-1.12.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
        var num=0;
        var $btn=$("#but").children("li");
        var $img=$("#banner").children("div").children("img");
        function changeimg(){
            /*alert(num);*/
            $btn.eq(num).addClass("highlight").siblings().removeClass("highlight");
            $img.eq(num).fadeIn(400).siblings().hide(50);
            if(num>=$btn.length-1){
                num=0;
            }else{
                num++;
            }
            chan=setTimeout(changeimg,2000)
        }
        changeimg();
        $("#banner").mouseenter(function(){
            clearTimeout(chan);
        })
        $("#banner").mouseleave(function(){
            num--;
            changeimg();
        })
        $btn.click(function(){
            var nums=$(this).index();/*在函数里面获取index值*/
            $(this).addClass("highlight").siblings().removeClass("highlight");
            $img.eq(nums).fadeIn(400).siblings().hide(50);
        })
    });
    </script>
</head>
<body>
	<div id="banner">
    	<div class="show">
        	<img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg">
        </div>
        <ul id="but">
        	<li class="highlight">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    
</body>
</html>