jQuery实现轮播图(fadeIn,siblings,fadeOut方法实现)
jQuery实现轮播图(fadeIn,siblings,fadeOut方法实现)
利用fadeIn(),siblings(),fadeOut()方法实现,一张图片显示,其他图片消失,最后一张图片时重新开始
html
<body><input type="button" value="下一张" /><img src="img/1.jpg" /><img src="img/2.jpg" /><img src="img/3.jpg" /><img src="img/4.jpg" /><img src="img/5.jpg" /><img src="img/6.jpg" /><ul><li></li><li></li><li></li><li></li><li></li><li class="on"></li></ul></body>
css
<style>* {margin: 0px;padding: 0px;}img {width: 500px;height: 350px;position: absolute;top: 25px;left: 0;}li{width: 15px;height: 15px;background: darkgrey;border: 1px solid;border-radius: 100%;float: left;list-style: none;margin-right: 5px;}ul{position: absolute;top: 330px;left: 300px;}.on{background: white;}</style>
script
<script>var i = 0;$(function () {$("input:button").click(function () {play2();//点击是执行切换函数})function play2() {if (i > 5) {//到第五张图片时,重新开始图片i = 0;play();} else {play();}}function play() {//图片出现,其他图片消失$("img").eq(i).fadeIn().siblings("img").fadeOut();$("li").eq(i).addClass("on").siblings("li").removeClass("on");i++;}setInterval(play2, 1000);})
</script>
jQuery实现轮播图(fadeIn,siblings,fadeOut方法实现)相关推荐
- 网页直播源码,JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
- jQuery实现轮播图(无缝轮播,附效果图),代码有详解。
jQuery实现轮播图 这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...
- Jquery实现轮播图效果
Jquery实现轮播图效果 首先是html <div id="box"><img src="./day6/am/轮播图/img/1.jpg" ...
- jQuery 实现轮播图
jQuery 轮播图 预览图: 使用jquery实现轮播图要比用原生js简单许多,代码也少很多. 思路 1.外层盒子设置为一个图片的大小 2.内层盒子为所有图片的宽度,图片左浮动 3.外层盒子设置ov ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法 在页面中引入jquer ...
- 基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件 不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧 使用需要准备(往下滑动会看到): ...
- 轮播图的两种方法及自动轮播
轮播图共计四种方法,本期先向大家分享两种,下期会补充剩余二个方法 公共部分: * {padding: 0px;margin: 0px;}.banner {width: 600px;margin: au ...
- 前端实现轮播图的三种方法。
轮播图,作为前端学习的经典案例,涉及了各种知识点,包括动画函数,js基础知识以及逻辑思路等,一辈子只做一次. 下面总结实现轮播图的三种方法,从易到难,大家选择性学习. 轮播图 一. Vue.js实现轮 ...
- Jquery实现轮播图效果(fadeIn()和fadeOut()方法的应用)
2019独角兽企业重金招聘Python工程师标准>>> 1.jquery.js从官网上下载最新的,使用外链导入到html中, 下载地址: http://jquery.com/down ...
最新文章
- Windows Azure 架构指南 – 第 1卷 发布
- Hibernate 几种对象状态
- Druid 配置_配置WebStatFilter
- React Native 轻松集成分享功能(Android 篇)
- iphone 如何实现全屏截图
- vue 脚手架测试环境_关于单元测试脚手架的几点思考
- 计算机等级考试四级有多少题,全国计算机等级考试四级试题(一)
- Java基础(七)——文件、IO流
- 大学计算机科学计术的总结,学好大学计算机科学与技术 要注意当天小结
- 2019最新易桥(HttpPrinter) web打印控件完整版版|HttpPrinter web打印控件下载
- wordcloud python 如何不显示中文_Python词云库wordcloud中文显示问题详解
- CINTA作业六:拉格朗日定理
- OSChina 周六乱弹 —— 你们还没下班呀?我都到家啦
- c++ RMI demo(使用RCF库)
- 【python】在图片上绘画
- 冯东阳:5000元葬送了我的行业站点之梦
- PLC控制技术与组态技术实训装置
- Java代码审计前置知识——Spring框架AOP和IoC
- 使用mybatis plus时传入中文时出现乱码
- HBase的安装(单机版)