基于css和jQuery实现轮播图
这里我用的<div>
元素代替的图片,具体应用时,改为<img>
元素就好了。效果图:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.js"></script><script>$(function () { //$(document).ready(function() {...})的简写。页面加载完了才执行脚本。//自动轮播,每隔1秒换一张图片:轮流去除hide, 增加hide;var n = 0;function autoShowNext() { //展示下一张:n += 1; //每一次执行autoShow() ,i的值加1, 到3时,归零 注意:这里的i+=1 应该放在第一行,否则第一张切换要2秒if (n == 3) {n = 0;}$(".pic").eq(n).show().siblings(".pic").hide();$("li").eq(n).addClass("activate").siblings().removeClass("activate"); //处理按钮效果}var p = 3;function autoShowPre() { //展示上一张p -= 1;if (p == -1) {p = 3;}$(".pic").eq(p).show().siblings(".pic").hide();$("li").eq(p).addClass("activate").siblings().removeClass("activate"); //处理按钮效果}var id = setInterval(autoShowNext, 1000); //默认轮播// $(".box").mouseenter(function(){ //鼠标进入暂停轮播
// clearInterval(id);
// });
// $(".box").mouseleave(function(){ //鼠标离开开始轮播
// id = setInterval(autoShowNext, 1000);
// });//上面的两个事件绑定可以通过下面hover方法搞定;$(".box").hover(function () { //函数1:鼠标悬浮clearInterval(id); //停止定时器$(".btn").fadeIn(); //显示手动按钮}, function () { //函数2:鼠标离开id = setInterval(autoShowNext, 1000); //开始定时器$(".btn").hide(); //隐藏手动按钮});//手动轮播:悬浮数字圆圈,当前元素增加activate, 兄弟元素去除activate;// 获取this索引,切换对应索引div,并去除hide,其兄弟元素增加hide$("ul").on("mouseenter", "li", function () {$(this).addClass("activate").siblings().removeClass("activate");var $index = $(this).index();n = $index; //给n重新赋值,保证手动点击后,自动轮播能续上。$(".box div:lt(3)").eq($index).show().siblings(".pic").hide();$(".btn").attr("index", $index); //给btn自定义属性赋值为当前索引});//前进后退按钮,相当于手动定时播放,因此直接用轮播函数$(".btn").click(function () {if ($(this).attr("id") == "btn1") {autoShowPre();} else {autoShowNext();}});});</script><style>* {margin: 0;padding: 0;}.box {margin: auto;margin-top: 100px;width: 600px;height: 400px;border: 1px solid red;position: relative;}.pic {width: 600px;height: 400px;position: absolute;left: 0;top: 0;}#a {background-color: yellow;}#b {background-color: green;}#c {background-color: blue;}.btn {background-color: lightgrey;color: white;opacity: .5;font-size: 30px;width: 30px;height: 60px;text-align: center;line-height: 60px;position: absolute;top: 50%;margin-top: -30px;display: none;}#btn1 {left: 0;}#btn2 {right: 0;}ul {position: absolute;left: 50%;margin-left: -45px;bottom: 5px;}ul li {list-style: none;display: inline-block;width: 30px;height: 30px;border-radius: 50%;background-color: lightgray;opacity: .5;text-align: center;line-height: 30px;}.hide {display: none;}.activate {background-color: darkgray;color: white;}</style>
</head>
<body>
<div class="box"><div id="a" class="pic"></div><div id="b" class="pic hide"></div><div id="c" class="pic hide"></div><div class="btn" id="btn1"><</div><div class="btn" id="btn2">></div><ul><li class="activate">1</li><li>2</li><li>3</li></ul>
</div>
</body>
</html>
基于css和jQuery实现轮播图相关推荐
- ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法 在页面中引入jquer ...
- 基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件 不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧 使用需要准备(往下滑动会看到): ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 网页直播源码,JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
- Jquery实现轮播图效果
Jquery实现轮播图效果 首先是html <div id="box"><img src="./day6/am/轮播图/img/1.jpg" ...
- jQuery 实现轮播图
jQuery 轮播图 预览图: 使用jquery实现轮播图要比用原生js简单许多,代码也少很多. 思路 1.外层盒子设置为一个图片的大小 2.内层盒子为所有图片的宽度,图片左浮动 3.外层盒子设置ov ...
- 基于css和js的轮播效果图实现
基于css和js的轮播效果图实现 第一篇:效果图 1.先啥也不说直接上效果图 第二篇:详细讲解 1. 建立容器 #box 给其设置相关属性(注意:overflow:hidden;) 2. Box ...
- jQuery实现轮播图(无缝轮播,附效果图),代码有详解。
jQuery实现轮播图 这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...
- 用jQuery实现轮播图效果(自动播放,能手动切换)
大家好,今天我和大家分享一下轮播图的实现,下面是我做的轮播图效果 首先我们看到,它是由背景图片.方向图标和指示器组成.**我们发现背景图片.方向图标和指示器是层叠在一起的,所以布局时我们要用绝对定位. ...
最新文章
- 一文搞懂PointNet全家桶——强势的点云处理神经网络
- 如何实现一个线程安全的 ConcurrentHashSet ?
- 分布式锁的实现与探索
- 哪个Java线程消耗了我的CPU?
- LeetCode 6. Z 字形变换(找规律)
- Android Frame动画概述及示例
- 综述 | 注意力机制
- WebApp开发技术搭配
- 常用正则表达式 (转)
- 《Linux内核分析》第一周学习报告
- 替换和修复系统User32.dll文件
- 禁用计算机声卡设备,电脑声音被禁用了怎么办
- Hurst指数估计方法(时域)——DFA
- 编程思想-编程范式-编程思想是一组世界观和方法论-(初识范式——程序王国中的世界观与方法论)...
- oracle在服装上的应用,形式美法则在服装设计中的应用
- 如何修改图片像素大小?调整图片大小的简单方法
- TigerGraph率先推出原生图数据库即服务,3200万美元B轮融资在这里!
- 无线网关服务器搭建教程,【树莓派】简易LoRa网关搭建+服务器设置一条龙教程(the things network)...
- 外汇市场百年风云演变,当代“钱”途之选就看EBC金融集团
- 设计模式学习(全)-七大基本原则-23种设计模式 超两万字总结!