jQuery - 广告图片轮播切换

最新推荐文章于 2021-12-27 09:39:06 发布

weixin_33913332

最新推荐文章于 2021-12-27 09:39:06 发布

阅读量803

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xtdxs/p/6612183.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            /*创建一个集合保存图片*/
            var imgs=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
            var  flag=0;  /*代表数组的下标*/
            /*点击向左的按钮*/
            $(".arrowLeft").click(function(){
                var i=0;
                if(flag==0){
                    flag=imgs.length-1;
                    i=flag+1;  /*图片的编号 li中的值*/
                }else{
                    flag--;
                    i=flag+1;  /*图片的编号*/
                }
                $(".adver").css("background","url(images/"+imgs[flag]+")");
                $("li:nth-of-type("+i+")").css("background","orange");
                $("li:nth-of-type("+i+")").siblings().css("background","#333333");
            });
            /*点击向右的按钮*/
            $(".arrowRight").click(function(){
                var i=0;
                if(flag==imgs.length-1){
                    flag=0;
                    i=flag+1;  /*图片的编号*/
                }else{
                    flag++;
                    i=flag+1;  /*图片的编号*/
                }
                $(".adver").css("background","url(images/"+imgs[flag]+")");
                $("li:nth-of-type("+i+")").css("background","orange");
                $("li:nth-of-type("+i+")").siblings().css("background","#333333");
            });

            /*显示→   ← 的按钮*/
            $(".adver").hover((function(){
                $(".arrowRight").show();
                $(".arrowLeft").show();
            }),function(){
                $(".arrowRight").hide();
                $(".arrowLeft").hide();
            })
        })
    </script>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"></div><div class="arrowRight"></div>
</div>
</body>
</html>

html+js

style.css

转载于:https://www.cnblogs.com/xtdxs/p/6612183.html

weixin_33913332

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery - 广告图片轮播切换

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title> 广告图片轮播切换</title> <link rel="stylesheet" href="css/style.css">...
复制链接

扫一扫