这个是我模仿网易云的音乐界面写的轮播图,主要实现的功能有

1.每隔4秒图片和对应的背景颜色一起切换

2.点击翻页会跳转到相对应的图片以及背景上

3.点击左右翻页,实现顺序切换

<1>HTML结构

<!-- 轮播图 -->
<div class="n-ban">
<div class="n-wrap">
<div href="" class="n-flag">
<!-- 使用url的方式设置背景图片 -->
<div class="backg"> 
<!-- 默认第一张图片显示,其它隐藏 -->                 
<img src="data:image/song/s1.png" alt="" style="display: block;">
<img src="data:image/song/s2.png" alt="">
<img src="data:image/song/s3.png" alt="">
<img src="data:image/song/s4.png" alt="">
<img src="data:image/song/s5.png" alt="">
<img src="data:image/song/s6.png" alt="">
<img src="data:image/song/s7.png" alt="">
<img src="data:image/song/s8.png" alt="">
<img src="data:image/song/s9.png" alt="">
</div>
<!-- 翻页图标 -->
<div class="dots">
<div class="pg" style="background: #C20C0C;"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="clear"></div>
</div>
<div class="n-lf"><img src="data:image/fonts2/left.png" alt=""></div>
<div class="n-rg"><img src="data:image/fonts2/right.png" alt=""></div>
</div>
<div class="dowload">
<img src="data:image/song/dw.png" alt="" class="dw1" style="float: left;">
<p class="dw-t">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
</div>
</div>
</div>
     <2>jquery
       

//轮播图实现
var timer;
//!!!!!这里最不该犯错的是i没有初始化导致后面错误不可知
var i = 0;
timer = setInterval(function () {
i++;
//可用取整的方法
if (i >= $(".pg").length) {
i = 0;
}
showBanner();
}, 4000)
function showBanner() {
//改变背景颜色路径
var path = "./image/banner/ln" + i + ".png";
$(".n-ban").css("background-image", "url(" + path + ")");
$(".backg>img").eq(i).show().siblings().hide();
$(".dots").children().eq(i).css("background", "#C20C0C").siblings().css("background", "rgba(255,255,255,0.8)")
}

//点击翻页小图标切换图通过改变变量i实现

$(".pg").click(function () {
i = $(this).index();
showBanner();
});
//点击左右箭头,图跳转
$(".n-lf").click(function () {
//i=9 i=8 i=7 i=6 i=5 i=4 i=3 i=2 i=1                   当i=0点击右箭头i=1,显示i=1的图片;
//i=0 i=1 i=2 i=3 i=4 i=5 i=6 i=7 i=8                   
//i=-9 i=-8 i=-7 i=-6 i=-5 i=-4 i=-3 i=-2 i=-1        当i=0点击左箭头此时i=-1但是需要显示i=8的图片
i--;
if(i<0){
i=i%(-$(".pg").length)+$(".pg").length;
}
showBanner();
});
$(".n-rg").click(function () {
i++;
i = i % $(".pg").length;
showBanner();
});
 
 

jquery实现轮播图切换的更多相关文章

  1. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  2. 用jQuery实现轮播图效果,js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  3. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  4. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  5. jQuery无缝轮播图思路详解-唯品会

    效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...

  6. jQuery封装轮播图插件

    // 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...

  7. 自己定义jquery插件轮播图

    轮播图-html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. 自己随意写了个简单的依赖jquery的轮播图

    //轮播图 function Switcher(obj){ this.box = $(obj.box); this.width = this.box.width(); this.banner = $( ...

  9. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  10. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. [转帖]JVM 问题诊断快速入门

    https://zhuanlan.zhihu.com/p/110197145 JVM 全称为 Java Virtual Machine,翻译为中文 "Java 虚拟机".本文中的J ...

  2. CentOS8 安装 SQLSERVER2019的简单过程

    1. 获取rpm包直接从微软官方网站即可 -rw-r--r-- 1 root root 820984 Apr 5 22:23 msodbcsql17-17.5.2.1-1.x86_64.rpm -rw ...

  3. docker 安装minio

    1.拉取镜像 docker pull minio/minio 2.运行容器 docker run -d -p 9000:9000 --name=minio --restart=always -e &q ...

  4. easyUI 多表头设置

  5. 从零开始配置vim(25)——关于 c++ python 的配置

    从9月份到国庆这段时间,因为得了女儿,于是回老家帮忙料理家事以及陪伴老婆和女儿.一时之间无暇顾及该系列教程的更新.等我回来的时候发现很多小伙伴私信我催更.在这里向支持本人这一拙劣教程的各位小伙伴表示真 ...

  6. 超级AI助手:全新提升!中文NLP训练框架,快速上手,海量训练数据

    "超级AI助手:全新提升!中文NLP训练框架,快速上手,海量训练数据,ChatGLM-v2.中文Bloom.Dolly_v2_3b助您实现更智能的应用!" 1.简介 目标:基于py ...

  7. 知乎利用 JuiceFS 给 Flink 容器启动加速实践

    本文作者胡梦宇,知乎大数据架构开发工程师,主要负责知乎内部大数据组件的二次开发和数据平台建设. 背景 Flink 因为其可靠性和易用性,已经成为当前最流行的流处理框架之一,在流计算领域占据了主导地位. ...

  8. Hadoop-Operation category READ is not supported in state standby 故障解决

    在查询hdfs时或者执行程序向hdfs写入数据时遇到报错:Operation category READ is not supported in state standby 意思是:该主机状态为待机, ...

  9. sshd命令-测试sshd_config配置是否正确

    sshd命令来自于英文词组"SSH daemon"的缩写,其功能是用于openssh服务器守护进程.openssh套件能够为两台主机之间建立加密的.可信任的数据通信服务,是rlog ...

  10. 多个Nginx进程运行导致配置加载失效问题

    多个Nginx进程运行导致配置加载失效问题 问题描述 在用nginx进行接口代理时,修改配置文件后,重新加载nginx,却发现无论怎么修改配置文件,都无法生效,接口一直无法代理成功.查看了之前做的接口 ...