JQuery实现图片自动轮播左右切换鼠标移入
首先 轮播的精髓就是在于图片的平滑滚动,下面图片应该能一下就看明白;
第一 我们将可视区控制在我们想呈现的内容的大小
第二 接着是在可视区内放入内容(图片);
第三 JQ效果实现 ,
中下方小圆点(按钮移入切换事件);
图片左右两侧点击切换事件;
自动播放事件;
移入图片终止播放移出开启播放;
css 以及 html 展示
<style>* {margin: 0;padding: 0;}li {list-style: none;}img {display: block;}#banner {width: 800px;height: 533px;margin: 0 auto;position: relative;overflow: hidden;}#banner img {width: 800px;height: 533px;}#banner .pic {position: absolute;left: 0;top: 0;width: 3200px;}#banner .pic li {float: left;}#banner .btn {position: absolute;left: 50%;bottom: 50px;transform: translateX(-50%);}#banner .btn li {float: left;width: 20px;height: 20px;background-color: #ccc;margin: 0 5px;border-radius: 50%;font-size: 0;}#banner .btn .active {background-color: orangered;}#banner .LRbtn {position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 100%;}.LRbtn span {float: left;width: 30px;height: 30px;background-color: rgba(255, 255, 255, 0.5);font-size: 20px;line-height: 30px;text-align: center;color: black;cursor: pointer;}#banner .LRbtn .right {float: right;}</style>
</head>
<body>
<div id="banner"><ul class="pic">/* 图片这里用的百度壁纸在线图片 可自行更换为自己本地或去图库复制在线图片地址*/<li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201306%2F23%2F110328s72xxse7lfis9fnd.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634349477&t=563102829f4ca7e9b0d271bfcfdbf786"alt="" /></li><li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F6159252dd42a28348c779b1b58b5c9ea14cebfc9.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634349477&t=a83d49c2dcaccbfc917770d883087f32"alt="" /></li><li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F1e30e924b899a90151fa90991f950a7b0308f556.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634349477&t=b676c97b953d97565dcc882b7cae07db"alt="" /></li><li><img src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/cf1b9d16fdfaaf51147b13c38e5494eef01f7a36.jpg"alt="" /></li></ul><ul class="btn"><li class="active"></li> <li></li><li></li><li></li></ul><div class="LRbtn"><span class="left"><</span><span class="right">></span></div>
</div></body>
样式呈现效果
JQuery代码呈现
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>var index = 0; // 定义一个初始值var picwidth = $('.pic li img').width(); // 一张图片的宽度var timer = ''; //声明一个定时器$('.btn li').mouseenter(function(){ //小按钮移入事件index = $(this).index()-1; // 减一是因为move 函数自身+1;move(); //move()方法最在下方});timer = setInterval(move,1000); // 自动播放$('.left').click(function () { //点击切换 左index -= 2;move();});$('.right').click(function () { //点击切换 右move();});function move() { //运动函数index++ ;if (index < 0) { //当状态值时为0时 使图片跳转到最后张图index = 3;$('.pic').stop().animate({'left': -index * picwidth})}if (index == 4) {//当状态值时为4时 使图片跳转到第一张图index = 0;$('.pic').stop().animate({'left': 0})}// ul 宽度随状态值切换$('.pic').stop().animate({'left': -index * picwidth}) ;// 小按钮类名随状态值切换$('#banner .btn li').removeClass('active').eq(index).addClass('active') ; }// 移入清除定时器 //移出开始定时器$('#banner').hover(function(){ clearInterval(timer);},function(){ timer = setInterval(move,1000);});</script>
以上就是Jquery实现轮播图的步骤与原理。
JQuery实现图片自动轮播左右切换鼠标移入相关推荐
- 【jQuery案例】 自动轮播图
[jQuery案例] 自动轮播图 使用jQuery实现了图片自动轮播 有左右按钮和底部小圆点选择功能 源代码如下: <!DOCTYPE html> <html lang=" ...
- java图片轮播_java制作广告图片自动轮播控件
首页图片的轮播 /** * 广告图片自动轮播控件 * */ public class ImageCycleView extends LinearLayout { /** * 上下文 */ privat ...
- JavaScript实现图片自动轮播
目录 1.轮播图片 1.1图片切换功能 1.2定时器功能 1.3图片自动轮播实现 2.页面定时弹出广告 2.2 技术分析 2.3步骤分析 2.4代码实现 3.表单校验 3.1需求分析 3.2技术分析 ...
- ios 图片自动轮播
ios 图片自动轮播 #import "NYViewController.h"#define kImageCount 5@interface NYViewController () ...
- iOS实现图片自动轮播展示
一.需要实现的效果如下图1,首页图片自动轮播展示,其中图片从网络异步加载,加载过程用风火轮显示加载中,如图2. 本文参考了以下博客文章: http://www.haodaima.net/art/268 ...
- 广告图片自动轮播控件
2019独角兽企业重金招聘Python工程师标准>>> 自定义广告轮播 自定义控件ImageCycleView 每个广告页的对象(包含具体显示图片.内容.id等) 自定义广告控件 I ...
- 手把手教你用jQuery实现手动自动轮播
轮播原理简述 假设有三张图,一字排开,用一个div包起来. 再来一个 div ,宽高和每幅图宽高一样,加overflow :hidden,超过此 div 宽高的图,都看不见.例如下图只能看见 2 ,而 ...
- 怎样实现banner自动播放html,纯CSS3实现banner图片自动轮播效果方式总结
自动轮播: 实现切换图片,图片循环播放:鼠标悬停某张图片, 则暂停切换.css 方法一.opacity控制透明度实现轮播效果 依照需求咱们选择用CSS3的animation动画进行实现:transit ...
- html5时间线图片自动轮播,js实现自动播放匀速轮播图
本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下 函数封装:( 匀速运动函数) function animate(obj,target,step,speed){ cl ...
最新文章
- 计算机密码行业专题研究:网络安全最大弹性领域
- C 语言编程 — 逻辑控制语句
- 使用append之后数组维度消失_JAVA魅力之神奇的数组带给你不一样的乐趣
- 让使用SQLite的.NET应用自适应32位/64位系统
- 【经验贴】smartCarers在比赛后如何获取更好的发展
- 最受期待的功能之一:索尼PS5或可直接运行老款PS主机游戏
- efi分区咋移动到c盘里_快速增加C盘容量的好方法!
- 通过XShell实现windows文件上传到Linux服务器上
- FFmpeg之yuv旋转(十九)
- 批处理文件怎么写_Spring Boot快速入门:批处理与任务调度
- C语言编程乐高,ROBOLAB 2.9 编程指南第五章乐高机器人-基础小实验
- 顶级在线图片处理工具Photopea
- 如何在WIN10系统中设置护眼颜色绿豆沙?
- 2022CCPC网络预选赛c题Problem C. Guess
- URL Protocol- -(coolice)
- ObjectAnimator旋转动画
- 电子商务计算机考研学校排名,电子商务考研院校排名
- 使用wkhtmltopdf 将网页转PDF
- python可视化---阶梯图step()
- 计算机辅助普通话水平测试应试手册,普通话水平测试应试手册
热门文章
- HTML5教程实例-用Canvas制作线性渐变图形
- win10下台式电脑主机,无法播放声音解决办法。
- 私募基金电子合同快来了!《私募投资基金电子合同业务管理办法(试行)(征求意见稿)》发布
- matlab给程序加总标题,【转】matlab标题,给figure加标题,subplot的部分用法
- iOS发布证书不受信任,钥匙串显示发布证书不受信任解决办
- 比尔盖兹退休告别演说:下个数位十年
- c语言求标准体重答案,c语言编写一个标准身高体重自测程序
- 关于ECharts怎么隐藏掉坐标轴
- 两个人同屏玩的象棋_有什么好玩的棋两个人也可以玩,四个人也可以玩,比较益智的...
- 空间实景三维激光点云数据处理服务来了!