基于jQuery实现幻灯片切换效果

效果图

功能：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实现幻灯片切换效果相关推荐

推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
基于jquery的tab切换
一款基于jquery的tab切换哦转载于:https://blog.51cto.com/11670972/1943140
梦幻无穷的幻灯片切换效果
在播放演示文稿时,增加恰当的幻灯片切换效果可以让整个放映过程体现出一种连贯感,还能让观众集中精力观看.在PowerPoint 2010中,设置幻灯片切换效果将比以往更加简单和自由,让我们通过实际的操作 ...
（专升本）PowerPoint（设置幻灯片切换效果）
目录幻灯片切换效果分为? 操作 "计时"组幻灯片切换效果分为? #mermaid-svg-ebDqVHASnUPePLJI .label{font-family:'trebuc ...
Android移动应用开发之使用异步调用进度条及实现幻灯片切换效果
文章目录异步调用进度条实现幻灯片切换效果异步调用进度条核心代码如下: package scq.scq.asyntaskdemo;import androidx.appcompat.app.Ap ...
各种幻灯片切换效果。soChange
各种幻灯片切换效果.soChange 插件 http://www.sucaijiayuan.com/api/demo.php?url=/demo/20121218-5 转载于:https://ww ...
3种风吹图片jquery堆叠图片切换效果插件
dreamweaver免费视频教程: http://www.51rgb.com/mproductzh.aspx?classid=31 加讨论群390180913 入群即可参加周一至周五免费公开课并获得 ...

基于jQuery实现幻灯片切换效果

效果图

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

最新文章

热门文章