简单的js制作轮播图

最新推荐文章于 2022-12-07 15:19:43 发布

你到底奶不奶我

最新推荐文章于 2022-12-07 15:19:43 发布

阅读量765

点赞数

分类专栏： java-s2 文章标签：使用js/jq编写的轮播广告

本文链接：https://blog.csdn.net/weixin_42979840/article/details/83314157

版权

java-s2 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

编辑html代码
使用数据存入图片,操作数据的下标,设定setInterval方法,每隔几秒执行一次

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="jquery-3.3.1.min.js"></script>

</head>

<body>
    <div class="adver" onmouseover="over();" onmouseout="out();">
        <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>
    </div>
    <script>
        //全局变量,用来存储索引
        var imageNum = 1;
        //全局变量用来存储setinterval的方法对象
        var time = null;
        //定义左右按键事件
        function over() {
            $(".arrowLeft,.arrowRight").show();
        }
        function out() {
            $(".arrowLeft,.arrowRight").hide();
        }
        //创建图片数组
        function getImagesStr(num) {
            var imagesStr = new Array();
            for (var i = 0; i < 6; i++) {
                imagesStr[i] = "images/adver0" + (i + 1) + ".jpg";
            }
            return imagesStr[num - 1];
        }
        //设置背景图片,控制全局变量
        function switchIamges(number) {
            if (number <= 0) {
                number = 6
            }
            if (number > 6) {
                number = 1;
            }
            imageNum = number;
            $(".adver").css("background", "url('" + getImagesStr(number) + "')");
            $("li").css({ "backgroundColor": "#333333", "color": "white" });
            $(".adver ul li:eq('" + (number - 1) + "')").css({ "backgroundColor": "#FFA403", "color": "white" });

        }
        $(document).ready(function () {
            //定义左右按键单击事件
            $(".arrowRight").click(function () {
                imageNum++;
                switchIamges(imageNum);
            });
            $(".arrowLeft").click(function () {
                imageNum--;
                switchIamges(imageNum);
            });
            //加载页面就进行动画操作,图片轮流播放
            startImages();
            //定义左右按键事件
            $(".arrowRight").mouseover(function () {
                stopimages();
            });
            $(".arrowRight").mouseout(function () {
                startImages();
            });
            $(".arrowLeft").mouseover(function () {
                stopimages();
            });
            $(".arrowLeft").mouseout(function () {
                startImages();
            });



            //获取数字按钮对象,定义事件
            $(".adver ul li").mouseover(function () {
                stopimages();
                var liNum = $(this).text();
                var vLiNum = parseInt(liNum);
                switchIamges(vLiNum);
            });
            $(".adver ul li").mouseout(function () {
                startImages();
                var liNum = $(this).text();
                var vLiNum = parseInt(liNum);
                switchIamges(vLiNum);
            });
        });




        //图片自动轮播
        function imagesAuto() {
            imageNum++;
            switchIamges(imageNum);
        }
        //定义事件,每隔多少毫秒执行一次
        function startImages() {
            time = setInterval("imagesAuto()", 2000);
        }
        //定义停止事件,调用该方法则停止轮播
        function stopimages() {
            clearInterval(time);
        }
    </script>
</body>

</html>

在这里的数组图片,我只是使用图片名字差不多的图片,进行存入数组,根据图片的名字进行轮播

在这里插入图片描述

对于css,可以随意

只是分享这个思维

提供以后反复看,有效提高对于数组的玩法

2018-10-30更新

<script type="text/javascript">
			/*送餐的起手  */
			Img = new  Array("${AppRootPath}/static/Desk/image/1_1.jpeg","${AppRootPath}/static/Desk/image/1_2.jpeg","${AppRootPath}/static/Desk/image/1_3.jpeg","${AppRootPath}/static/Desk/image/1_4.jpeg","${AppRootPath}/static/Desk/image/1_5.jpeg","${AppRootPath}/static/Desk/image/1_6.jpeg","${AppRootPath}/static/Desk/image/1_7.jpeg","${AppRootPath}/static/Desk/image/1_8.jpeg");
			size = Img.length;
	        i = 0;
	           function chImg(){
	        	            picID.src = Img[i];
	        	            i++;
	        	            if (i>=size) i = 0;
				 }
	        function startSwitch() {
	            time = setInterval("chImg()", 100);
	        }    
	        $(function () {
	            startSwitch();
	            startSwitchp();
	        });
		/* 广告的轮播 */
		Imgp = new  Array("${AppRootPath}/static/Desk/image/shop1.jpg","${AppRootPath}/static/Desk/image/shop2.jpg","${AppRootPath}/static/Desk/image/shop3.jpg","${AppRootPath}/static/Desk/image/shop5.jpg");
		hrefp = new Array("shop?shopId=6","shop?shopId=8","shop?shopId=7","shop?shopId=9");
		sizep = Imgp.length;
     	  f = 0;
             function chImgp(){
	        	            picIDp.src = Imgp[f];
	        				picIDa.href=hrefp[f];
	        	           	f++;
	        	            if (f>=sizep) f = 0;
				 }
          function startSwitchp() {
	            time = setInterval("chImgp()", 2000);
	        }    
</script>

以上有两个动态图的jq代码

先定义一个数组
在这里插入图片描述
之后取得数组的长度

定义一个变量

之后再定义一个方法
在这个方法中,使用jq的方法,使用节点的id.节点的属性设置属性的值

在这里的img[i]获取数组中的值给src.设置src的值
之后i++;
判断i是否大于等于size,就是是否大于数组的长度,为了使图片可以来回轮播.所以设置当i大于等于size的时候,将i的值设置为0,从0开始进行来回轮播

之后再定义一个方法
在这里插入图片描述
在这个方法中,使用了setInterval的方法,表示时隔一段时间执行一次chImg()的方法,
在chImg()中,我在上面也有说明,这里截图整体

setInterval("chImg()", 100);

这段代码表示每隔0.1秒执行一次上面chImg().因为这里是动画,所以设置时隔时间比较短

之后写入jq的reday()方法中,在页面打开的时候就执行的主入口,

在这里插入图片描述

在这个主入口中的`startSwitchp();方法,

也是一致的.这里我们为了实现点击图片可以查询相关的商家资料,所以我们加入了设置了href的属性,
在这里插入图片描述

也是使用了相同的方法设置节点href的属性值
在这里插入图片描述

也是使用setInterval()的方法设置每隔多少时间执行一次,
` 在这里插入图片描述

在这个方法中,在主入口也有加入,所以在打开页面的时候就会执行

在jsp中的代码编写
在这里插入图片描述

你到底奶不奶我

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单的js制作轮播图

编辑html代码使用数据存入图片,操作数据的下标,设定setInterval方法,每隔几秒执行一次&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;meta charset=&amp;
复制链接

扫一扫