用jQuery写的轮播图
效果图：
GitHub地址：https://github.com/123456abcdefg/Javascript
大家可以下载源码查看。
与前一篇写的轮播图实现的效果一致，这个是用jQuery写的，相对简单一点的吧。
js代码：
<script src="../jquery-3.3.1.min.js"></script>
<script>
var index = 1;
var newLeft = 0;
var interval;
var buttSpan = $(".butt").children();
function nextPage(next){
$(buttSpan[index-1]).removeClass("on");
if(next){
if(index == 5){
index = 1;
newLeft = 0;
}
else{
index ++;
newLeft = -600*(index-1);
}
}
else{
if(index == 1){
index = 5;
newLeft = -2400;
}
else{
index --;
newLeft = -600*(index-1);
}
}
$(".list").css("left",newLeft + 'px');
$(buttSpan[index-1]).addClass("on");
}
function autoNextPage(){
interval = setInterval(function(){
nextPage(true);
},"3000");
}
autoNextPage(); $(".container").mouseover(function(){
clearInterval(interval);
$(".arrow").css("display","block");
});
$(".container").mouseout(function(){
autoNextPage();
$(".arrow").css("display","none");
}); $(".left").click(function(){
nextPage(false);
});
$(".right").click(function(){
nextPage(true);
}); function clickButt(){
for(var i = 0;i<5;i++){
$(buttSpan[i]).click(function(){
$(buttSpan[index-1]).removeClass("on");
index = $(this).attr("index")-1;
nextPage(true);
});
}
}
clickButt(); </script>
主要包括一下几个部分：
1.一个轮播的方法（left）：nextPage(next);
index , newLeft , left
2.自动轮播：autoNextPage();
3.鼠标放到container上图片及按钮不再播放
4.鼠标点击左右方向，可以向左/向右轮播。（调用nextPage()方法）
5.点击下面几个按钮，可以切换到相应的图片（index），并且按钮样式也相应改变。
这个是相对于上面较简单的另一种写法：
点击相应的按钮，按钮样式改变，其同胞元素恢复之前。
获取到当前index值，调用play(true)方法，按钮对应的图片改变。
完整代码：
<html>
<head>
<meta charset="utf-8" />
<title>1</title>
<style>
*{
padding:0;
margin:0;
}
.container{
width:600px;
height:400px;
overflow:hidden;
position:relative;
margin:0 auto;
}
.list{
width:3000px;
height:400px;
position:absolute; }
.list img{
width:600px;
height:400px;
float:left;
}
.butt{
width:300px;
height:20px;
position:absolute;
left:230px;
bottom:20px;
cursor:pointer;
}
.butt span{
width:20px;
height:20px;
display:inline-block;
border:1px solid brown;
border-radius:50%;
color:brown;
z-index:1;
font-size:20px;
font-weight:bold;
text-align:center;
}
.arrow{
width:30px;
height:30px;
position:absolute;
top:200px;
color:black;
background-color:white;
z-index:1;
font-size:30px;
font-weight:bold;
text-align:center;
text-decoration:none;
display:none;
}
.left{
left:10px;
}
.right{
right:10px;
}
.on{
background-color:black;
} </style>
</head> <body>
<div class="container">
<div class="list" style="left:0px;">
<img src="../img/1.jpg"></img>
<img src="../img/2.jpg"></img>
<img src="../img/3.jpg"></img>
<img src="../img/4.jpg"></img>
<img src="../img/5.jpg"></img>
</div> <div class="butt">
<span index="1" class="on">1</span>
<span index="2">2</span>
<span index="3">3</span>
<span index="4">4</span>
<span index="5">5</span>
</div> <a href="#" class="arrow left"><</a>
<a href="#" class="arrow right">></a> </div> <script src="../jquery-3.3.1.min.js"></script>
<script>
var index = 1;
var newLeft = 0;
var interval;
var buttSpan = $(".butt").children();
function nextPage(next){
$(buttSpan[index-1]).removeClass("on");
if(next){
if(index == 5){
index = 1;
newLeft = 0;
}
else{
index ++;
newLeft = -600*(index-1);
}
}
else{
if(index == 1){
index = 5;
newLeft = -2400;
}
else{
index --;
newLeft = -600*(index-1);
} }
$(".list").css("left",newLeft + 'px');
$(buttSpan[index-1]).addClass("on");
}
function autoNextPage(){
interval = setInterval(function(){
nextPage(true);
},"3000");
}
autoNextPage(); $(".container").mouseover(function(){
clearInterval(interval);
$(".arrow").css("display","block");
});
$(".container").mouseout(function(){
autoNextPage();
$(".arrow").css("display","none");
}); $(".left").click(function(){ nextPage(false);
});
$(".right").click(function(){ nextPage(true);
}); function clickButt(){ for(var i = 0;i<5;i++){
$(buttSpan[i]).click(function(){
$(buttSpan[index-1]).removeClass("on");
index = $(this).attr("index")-1;
nextPage(true);
});
}
}
clickButt(); </script> </body> </html>
参考博客：https://www.cnblogs.com/lihuijuan/p/9486051.html
用jQuery写的轮播图的更多相关文章
- 记录一下自己用jQuery写的轮播图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
- 用 JS 写 （轮播图 / 选项卡 / 滑动门）
页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...
随机推荐
- APP需求调研、对比
二.人脸验证 1.芝麻认证 : 0.4元/次,需要企业企业认证.不能有与芝麻信用类似的业务,如:保险... 2.旷视 : 0.5/次.企业认证.业务限制 3. 百度人脸识别 : 企业认证. 4.科大 ...
- python绘制图形
python能快速解决日常工作中的小任务,比如数据展示. python做数据展示,主要用到matplotlib库,使用简单的代码,就可以很方便的绘制折线图.柱状图等.使用Java等,可能还需要配合 ...
- JarvisOJ BASIC 德军的密码
已知将一个flag以一种加密形式为使用密钥进行加密,使用密钥WELCOMETOCFF加密后密文为 000000000000000000000000000000000000000000000000000 ...
- Facebook开源最先进的语音系统wav2letter++
最近,Facebook AI Research(FAIR)宣布了第一个全收敛语音识别工具包wav2letter++.该系统基于完全卷积方法进行语音识别,训练语音识别端到端神经网络的速度是其他框架的两倍 ...
- H.264编码原理以及I帧B帧P帧
前言 ----------------------- H264是新一代的编码标准,以高压缩高质量和支持多种网络的流媒体传输著称,在编码方面,我理解的他的理论依据是:参照一段时间内图像的统计结果表明,在 ...
- PHP——运行shell命令|脚本
内置函数 PHP | 系统程序执行 exec shell_exec passthru system 配置 打开php.ini配置文件,并从disable_function将用到的函数从禁用中删除,然后 ...
- 洛谷P1781宇宙总统题解
题目 此题原本是一个简单的排序,但因为数据范围的限制,所以变成了一个需采用字符串排序的题目,接下来我将给大家讲一下如何字符串排序. 首先先判断为位数上是否相同,如果不同再比较那一位的数就可以了 #in ...
- Linux mount BSD disk partition
Linux mount BSD disk partition 来源 https://www.cnblogs.com/jhcelue/p/6858159.html 假设须要从第二块硬盘复制文件.该硬盘格 ...
- php 部署在iis HTTP 错误 500.0 - Internal Server Error 无法在<fastCGI>应用程序配置中找到<handler> scriptProcessor
原因,从A服务器复制一个部署在IIS上的PHP项目,根节点指向 publc/web.config 把里面涉及的 php路径改成正确的即可
- 微信小程序原生开发简介
简介: 总结: 1. 逻辑层使用js引擎,视图层使用webview渲染 2. 微信小程序已经支持了绝大部分的 ES6 API 3. 可以自动补全css的兼容语法 文档:https://develope ...