jQuery - 广告图片轮播切换

 

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>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
        <li>6li>
    ul>
    <div class="arrowLeft">div><div class="arrowRight">div>
div>
body>
html>
html+js

 

style.css

 

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

你可能感兴趣的:(jQuery - 广告图片轮播切换)