轮播图 柔情只为你懂 2021-11-23 13:56 560阅读 0赞 **## CSS样式** *{ margin: 0; padding: 0; list-style: none; } div{ width: 300px; height: 300px; position: relative; border: 1px solid gray; margin-left: 250px; overflow: hidden; } ul{ width: 1500px; height: 300px; position: absolute; } ul>li{ width: 300px; height: 300px; float: left; } ul>li>img{ width: 100%; height: 100%; } button{ position: absolute; top: 120px; border: none; width: 50px; height: 80px; background: rgba(120,120,120,0.6); display: none; color: orange; font-size: 22px; } button:nth-of-type(1){ left: 0; } button:nth-of-type(2){ right: 0; } ol{ position: absolute; bottom: 10px; width: 100%; display: flex; justify-content: space-around; } ol>li{ width: 15px; height: 15px; border-radius: 50%; background: white; } ## HTML代码 <div> <ul> <li><img src="img/WuTa_2019-02-25_18-27-57.jpg" ></li> <li><img src="img/WuTa_2019-02-25_18-33-14.jpg" ></li> <li><img src="img/WuTa_2019-02-25_18-33-21.jpg" ></li> <li><img src="img/WuTa_2019-03-16_20-12-13.jpg" ></li> <li><img src="img/WuTa_2019-02-25_18-27-57.jpg" ></li> </ul> <ol> <li style="background: #FF0000;"></li> <li></li> <li></li> <li></li> </ol> <button>prev</button> <button>next</button> </div> ## js代码 var timer var index = 0 $(function(){ $("button").eq(1).click(function(){ $("ul").stop(true,true) index++ if(index>3){ index=0 } if($("ul").position().left<=-1200){ $("ul").css("left","0") } $("ul").animate({"left":"-=300px"},500) yuan() }) $("button").eq(0).click(function(){ index-- if(index<0){ index = 3 } $("ul").stop(true,true) if($("ul").position().left>=0){ $("ul").css("left","-1200px") } $("ul").animate({"left":"+=300px"},500) yuan() }) }) var bian = function(){ index++ if(index>3){ index=0 } $("ul").stop(true,true) if($("ul").position().left<=-1200){ $("ul").css("left","0") } $("ul").animate({"left":"-=300px"},500) yuan() } //动画自动轮播 timer = setInterval(bian,2000) $("div").hover(function(){ clearInterval(timer) // 圆点点击 $("ol>li").click(function(){ $(this).css("background","red").siblings().css("background","white") index =$(this).index() $("ul").stop().animate({'left':index*-300+"px"},500) }) $("button").fadeIn(300) },function(){ timer= setInterval(bian,2000) $("button").fadeOut(300) }) function yuan(){ $("ol>li").eq(index).css("background","red").siblings().css("background","white") }
相关 html script轮播图,javascript简单轮播图 \\轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片、其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。\\![bV ゞ 浴缸里的玫瑰/ 2022年10月06日 13:57/ 0 赞/ 304 阅读
相关 轮播图 ![这里写图片描述][SouthEast] > html页面 <!DOCTYPE html> <html> <head> 布满荆棘的人生/ 2022年06月05日 09:07/ 0 赞/ 369 阅读
相关 轮播图 <html> <head> <meta name="viewport" id="viewport" content="width=device- 布满荆棘的人生/ 2022年05月29日 03:47/ 0 赞/ 295 阅读
相关 轮播图 点击左右按钮,切换图片。图片的序号也随之变化。 逻辑思维:每次点击按钮时,只需要改变img的“src”属性就可以切换图片。将图片的"src"放在数组中,就可以知道每一张图的位 落日映苍穹つ/ 2022年05月27日 08:16/ 0 赞/ 338 阅读
相关 轮播图 废话不多说,直接上代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" 淩亂°似流年/ 2022年05月23日 09:38/ 0 赞/ 339 阅读
相关 轮播图 方法1 不太完善 html+js代码如下 <!DOCTYPE html> <html lang="en"> <head> 我不是女神ヾ/ 2022年05月13日 08:20/ 0 赞/ 332 阅读
相关 轮播图 本文转载至菜鸟教程,仅做笔记之用,方便自己学习 [菜鸟链接][Link 1] <!DOCTYPE html> <html> <head> 秒速五厘米/ 2021年12月10日 05:57/ 0 赞/ 528 阅读
相关 轮播图 setInterval setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 给需要轮播的图片在js里声明一个变量 以数组的类型 在H 男娘i/ 2021年11月17日 06:32/ 0 赞/ 458 阅读
相关 轮播图 方案1 初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 html代码 <div class="fullS 末蓝、/ 2021年06月10日 20:38/ 0 赞/ 675 阅读
还没有评论,来说两句吧...