jQ实现轮播图

最新推荐文章于 2024-03-14 19:48:19 发布

Denial_learn

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量234

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/Denial_learn/article/details/101032072

html 专栏收录该内容

33 篇文章

订阅专栏

效果图：
在这里插入图片描述
html代码：

<div id="first_two">
					<div id="first_two_img">
						<img src="img/FristPage/scroll-01.jpg"/>
						<img src="img/FristPage/scroll-02.jpg"/>
						<img src="img/FristPage/scroll-03.jpg"/>
						<img src="img/FristPage/scroll-04.jpg"/>
					</div>
					<!--<img src="img/FristPage/scroll-01.jpg"/>-->
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
				</div>

jQ代码：

   $(function(){
    	var time2;
    	var i=1;
    	function time1(){
    		time2 = setInterval(function(){
    			var a=$("#first_two_img img:nth-of-type("+i+")").attr("src")
    			$("#first_two").css("background-image","url("+a+")");
    			$("#first_two ul li:nth-of-type("+i+")").css("background-color","red");
    			$("#first_two ul li:nth-of-type("+i+")").siblings().css("background-color","#A9A9A9");
color","#A9A9A9");
    			i++;
    			if(i==5){i=1}
    		},1000);
    	};
    	time1();
    		$("#first_two ul li").hover(
    			function(){
    				var index = $(this).index();
    				clearInterval(time2);
    				i = index+1;
    				$("#first_two").css("background-image","url("+$("#first_two_img img:nth-of-type("+i+")").attr("src")+")");
    				$("#first_two ul li:nth-of-type("+i+")").css("background-color","red");
    				$("#first_two ul li:nth-of-type("+i+")").siblings().css("background-color","#A9A9A9");
    			},
    			function(){
    				time1();
    			}
    		);
    })