效果图

功能:1、幻灯片自动切换;2、点击下方小圆点切换对应幻灯片;3、点击左右两侧耳朵控制幻灯片切换至上一张或下一张;4、鼠标悬停幻灯片上时,幻灯片停止切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标题</title><link rel="stylesheet" href="../css/reset.css"><script src="./jquery-3.4.1.min.js"></script><style type="text/css">#box{width: 100%; height: 350px;margin-top: 100px;}.bg0{background: #0D2736;}.bg1{background: #0F0909;}.bg2{background: #283F75;}.bg3{background: #405CDA;}#slide{width: 800px; height: 350px; margin: 0 auto;position: relative;overflow: hidden;}#zxw{width: 4000px; height: 35px;position: absolute; top: 0; left: 0px;}#zxw li{float: left;}#zxw li a{display: block; width: 800px; height: 350px;position: relative;}#zxw li a img{width: 100%; height: 100%;}/* --------- */#zxw li a span{font-size: 150px; text-align: center;position: absolute; color: #fff;top: 100px; left: 350px;}/* ----------- */#nav{width: 160px; height: 20px;position: absolute; bottom: 10px; left: 50%;margin-left: -80px;}#nav li{width: 20px; height: 20px; border-radius: 50%;background: #ccc; float: left;margin: 0 10px;cursor: pointer;}#nav .active{background: blue;}#prev, #next{width: 25px; height: 50px;background: #fff;position: absolute; top: 150px;cursor: pointer;}#prev{left: 10px;}#next{right: 10px;}#prev img, #next img{width: 100%; height: 100%;}</style><script>$(function(){// 全局变量var c = 0;var zxw = $("#zxw li");var nav = $("#nav li");// 定义幻灯片自动切换效果function ziDongQieHuan(){c++;    //c = 1 2if(c == zxw.length){c = 1;$("#zxw").css({left:0});}$("#zxw").animate({left:c*-800+"px"}, 500);// 定义小圆点和背景颜色自动切换效果if(c == nav.length){$("#nav li").eq(0).addClass("active").siblings("li").removeClass("active");$("#box").attr("class", "bg0")}else{$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");$("#box").attr("class", "bg"+c);};};// 定义点击小圆点切换效果function dianJiQieHuan(obj){// 获取当前点击对象的下标值c = obj.index();$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");$("#zxw").animate({left:c*-800+"px"}, 500);$("#box").attr("class", "bg"+c);};// 定义点击左耳朵切换效果function prev(){c--;if(c<0){c = nav.length-1;};$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");$("#zxw").animate({left:c*-800+"px"}, 500);$("#box").attr("class", "bg"+c);};// 定义点击右耳朵切换效果function next(){c++;if(c > nav.length-1){c = 0;};$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");$("#zxw").animate({left:c*-800+"px"}, 500);$("#box").attr("class", "bg"+c);};// 定时器,每2秒执行一次var time = setInterval(ziDongQieHuan, 2000);// 鼠标移入#box元素中,停止定时器$("#slide").mouseenter(function(){clearInterval(time);});    // 鼠标移出#box元素后,开始定时器$("#slide").mouseleave(function(){//鼠标移出时,开始定时器,并将定时器赋值给time变量,而当鼠标再次移入时,则刚好删除上次的定时器,不会累加time = setInterval(ziDongQieHuan, 2000);});   // 定义小圆点点击事件$("#nav li").click(function(){// $(this):当前点击的对象dianJiQieHuan($(this));});// 定义左耳朵点击事件 $("#prev").click(function(){prev();});// 定义右耳朵点击事件 $("#next").click(function(){next();});});</script></head>
<body><!-- 最外层盒子开始 --><div id="box" class="bg0"><!-- 幻灯片盒子开始 --><div id="slide"><!-- 幻灯片开始 --><ul id="zxw"><li><a href="#"><img src="https://www.51zxw.net/NewAn/UploadFiles/20200609/202006090520504133.jpg"><span>0</span></a></li><li><a href="#"><img src="https://www.51zxw.net/NewAn/UploadFiles/20200608/202006080410588630.jpg"><span>1</span></a></li><li><a href="#"><img src="https://www.51zxw.net/NewAn/UploadFiles/20200608/202006080408097382.jpg"><span>2</span></a></li><li><a href="#"><img src="https://www.51zxw.net/NewAn/UploadFiles/20200624/202006240832286533.jpg"><span>3</span></a></li><li><a href="#"><img src="https://www.51zxw.net/NewAn/UploadFiles/20200609/202006090520504133.jpg"><span>4</span></a></li></ul><!-- 幻灯片结束 --><!-- 小圆点开始 --><ul id="nav"><li class="active"></li><li></li><li></li><li></li></ul><!-- 小圆点结束 --><!-- 左右两侧耳朵开始 --><div id="prev"><img src="./prev.png"></div><div id="next"><img src="./next.png"></div><!-- 左右两侧耳朵结束 --></div><!-- 幻灯片盒子结束 --></div><!-- 最外层盒子结束 -->
</body>
</html>

reset.css

*{margin: 0; padding: 0; box-sizing: border-box;}
body{font-size:16px; font-family:"微软雅黑"; color: #333;}
b{font-weight: normal;}
i{font-style: normal;}
a, a:hover, a:active{text-decoration: none;  color: #333;}
input,textarea,select{outline: none;}
img{border: none; vertical-align: middle;}
li{list-style-type: none;}
.fl{float: left;}
.fr{float: right;}
.cl{clear: both;}
.clearfix::after{content: "";display: table;clear: both;
}

基于jQuery实现幻灯片切换效果相关推荐

  1. 推荐20款基于 jQuery CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  2. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  3. click 点击图片不起作用_JavaScript 练手小案例:基于SVG的图片切换效果

    最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...

  4. 基于jquery的tab切换

    一款基于jquery的tab切换哦 转载于:https://blog.51cto.com/11670972/1943140

  5. 梦幻无穷的幻灯片切换效果

    在播放演示文稿时,增加恰当的幻灯片切换效果可以让整个放映过程体现出一种连贯感,还能让观众集中精力观看.在PowerPoint 2010中,设置幻灯片切换效果将比以往更加简单和自由,让我们通过实际的操作 ...

  6. (专升本)PowerPoint(设置幻灯片切换效果)

    目录 幻灯片切换效果分为? 操作 "计时"组 幻灯片切换效果分为? #mermaid-svg-ebDqVHASnUPePLJI .label{font-family:'trebuc ...

  7. Android移动应用开发之使用异步调用进度条及实现幻灯片切换效果

    文章目录 异步调用进度条 实现幻灯片切换效果 异步调用进度条 核心代码如下: package scq.scq.asyntaskdemo;import androidx.appcompat.app.Ap ...

  8. 各种幻灯片切换效果。soChange

    各种幻灯片切换效果.soChange 插件   http://www.sucaijiayuan.com/api/demo.php?url=/demo/20121218-5 转载于:https://ww ...

  9. 3种风吹图片jquery堆叠图片切换效果插件

    dreamweaver免费视频教程: http://www.51rgb.com/mproductzh.aspx?classid=31 加讨论群390180913 入群即可参加周一至周五免费公开课并获得 ...

最新文章

  1. 二进制补码求值用c语言,C语言程序设计第2章数据类型.运算符与表达式.ppt
  2. [Android工具]更新音乐下载软件,MP3音乐无损音乐下载器
  3. java23种设计模式+单例_Java23种设计模式之单例模式
  4. Qt Creator移动平台
  5. Tomcat/weblogic session失效时间的几种设置方法
  6. stm32 Flash读写[库函数]
  7. JS 打印 iframe
  8. SAP License:COPA分摊循环-FKART开票类型作为循环接收方
  9. SAP License:SAP技术人员路在何方?
  10. 13 年 29 款手机,从激进到求稳,iPhone 都经历什么?
  11. 浅析:18个影响网站流量下降的原因!
  12. HTTP有哪些特点?
  13. matlab聚类分析工具箱,matlab聚类工具箱
  14. 一款基于 Python 语言的 Linux 资源监视器!
  15. 中断上下文中的preempt count
  16. java课程设计 成绩_Java课程设计—学生成绩管理系统(201521123005 杨雪莹)
  17. Java50道经典编程题:(十三)数字谜题 ——循环语句及判断符的使用
  18. robot_localization中EKF源码介绍
  19. 【XSY2495】余数
  20. Lists.partition用法

热门文章

  1. 你为什么应该为软件付费?
  2. iOS——UIActivityIndicatorView活动指示器
  3. 歌曲用计算机弹出来网红英语歌,听歌学英语:《Wolves》全世界网红都在翻唱的歌曲...
  4. LENZE变频器调试软件L-forc Engineer v2 送资料部分手册
  5. Dubbo框架整体认知
  6. 【超简单,保姆级】❤️Linux 安装 Windows 软件,微信、QQ、TIM等,再也不用来回切换了!❤️【建议收藏】
  7. Scratch3.0 使用 Scratch Link 连接Wedo等外设
  8. Leaning method
  9. 新代系统反向间隙参数_新代系统参数
  10. Java创建大小顶堆