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

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. Docker镜像的基本操作总结

    摘要 容器化是上个十年比较火的技术. 现在看起来在进行总计有点晚了. 不过linux是三十年前的,我依旧没有总结好 道理是一样的. 技术不在于新旧, 重要的是学习到原理. Docker的重要概念 Re ...

  2. Redis7.0.7的简单安装与学习

    Redis7.0.7的简单安装与学习 摘要 2022.12.18 世界杯决赛 另外是我感染奥密克戎第五天. 高烧已经没了,但是嗓子巨疼. 睡不着觉,肝胆学习一下最新的Redis7.0.7 第一部分安装 ...

  3. Redis 菜鸟进阶

    Redis 菜鸟进阶 背景 最近产品一直要优化性能,加强高可用. 有一个课题是Redis高可用与性能调优. 我这边其实获取到的内容很有限. 最近济南疫情严重,自己锁骨骨折. 然后通勤时间基本上都用来查 ...

  4. ELK运维文档

    Logstash 目录 Logstash Monitoring API Node Info API Plugins Info API Node Stats API Hot Threads API lo ...

  5. RN 动态渲染列表

    写在组件中 想要图片出来还应该给图片宽高哈!! alignItems: 'center', //水平居中 动态渲染列表 返回的是一个数组 网络图片的渲染方式 <Image source={{ur ...

  6. 【0基础学爬虫】爬虫基础之自动化工具 Pyppeteer 的使用

    大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶.逆向相关文章,为实现从易到难全方位覆盖,特设[0基础学爬 ...

  7. 【K哥爬虫普法】老铁需要车牌靓号吗?判刑的那种

    我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K 哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识, ...

  8. ClickHouse(08)ClickHouse表引擎概况

    目录 合并树家族 日志引擎系列 集成的表引擎 其他特殊的引擎 资料分享 参考文章 目前ClickHouse的表引擎主要有下面四个系列,合并树家族.日志引擎系列.集成的表引擎和其他特殊的引擎. 合并树家 ...

  9. 微信对话平台API开发

    接入官方文档接入文档 下面我们开始使用前端来进行接入 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  10. session未过期就丢失的原因以及处理方式

    转 https://blog.csdn.net/flamelp/article/details/5316725?utm_medium=distribute.pc_relevant.none-task- ...