基于jQuery实现水平轮播效果

效果图

方法：使用动画效果，让第一幅图的宽度逐渐变为0px，然后将第一幅图添加至父元素末尾

<!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: 800px; height: 300px; margin: 200px auto; position: relative; overflow: hidden;}#box ul{width: 3200px; height: 300px;position: absolute; top: 0px; left: -800px;}#box ul li{width: 800px; height: 300px; float: left;}#box ul li img{width: 800px; height: 300px;;}</style><script>$(function(){// 滚动播放函数function gunDongBoFang(){      $("#box ul li:first").animate({width:"0px"}, 1000, function(){$("#box ul").append($("#box ul li:first").width("800px"));});};// 定时器，每2秒执行一次var time = setInterval(gunDongBoFang, 2000);// 鼠标移入#box元素中，停止定时器$("#box").mouseenter(function(){clearInterval(time);});    // 鼠标移出#box元素后，开始定时器$("#box").mouseleave(function(){// setInterval(gunDongBoFang, 1000); 错误写法，鼠标移入移出定时器会累加//鼠标移出时，开始定时器，并将定时器赋值给time变量，而当鼠标再次移入时，则刚好删除上次的定时器，不会累加time = setInterval(gunDongBoFang, 2000);});    });</script>
</head>
<body><div id="box"><ul><li><a href="#"><img src="https://www.51zxw.net/NewAn/UploadFiles/20200609/202006090520504133.jpg"></a></li><li><a href="#"><img src="https://www.51zxw.net/NewAn/UploadFiles/20200608/202006080410588630.jpg"></a></li><li><a href="#"><img src="https://www.51zxw.net/NewAn/UploadFiles/20200608/202006080408097382.jpg"></a></li><li><a href="#"><img src="https://www.51zxw.net/NewAn/UploadFiles/20200624/202006240832286533.jpg"></a></li></ul></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实现水平轮播效果相关推荐

基于jQuery实现垂直轮播效果
效果图方法:使用定时器让元素不断替换及高度变化 <!DOCTYPE html> <html lang="en"> <head><meta ...
基于CSS3实现水平轮播效果
效果图方法:使用动画实现功能:鼠标悬停可以实现暂停 <!DOCTYPE html> <html lang="en"> <head><me ...
实现一个基于jQuery的图片轮播效果（带自动播放）
data.json {"data": [{"title": "西游题材小游戏合辑","subtitle": " ...
jQuery补充，基于jQuery的bxslider轮播器插件
基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head>&l ...
如何使用jQuery实现简单轮播效果
如何使用jQuery实现简单轮播效果如何使用jQuery实现简单的轮播效果,事例如下: 在Htlm中封装一个大盒子为cont(可以自行定义类名),其中放置2个类名分别为con(可以自行定义类名).h ...
slick.js基于jQuery全屏轮播插件
下载地址基于slick.js轮播插件实现的全屏轮播效果,支持图片和文字动画显示效果. dd:
jQuery实现图片轮播效果
图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : 自动轮播: 将一个 ...
jquery实现jQuery实现图片轮播效果，jQuery实现焦点新闻
在写这篇文章之前,xxx已经写过了几篇关于改jquery实现主题的文章,想要了解的朋友可以去翻一下之前的文章效果图: 实现代码: 每日一道理爱,有的时候不需要山盟海誓的承诺,但她一定需要细致入微的 ...
MBB类似jquery.bxslider插件轮播效果
首先,如图一:当打开页面是,产品出现了淡入淡出切换轮播状态,当鼠标点击左边的小图时,就会切换出相对应的大图,当鼠标移开的时候,这个轮播就会停止自动轮播,只有人工手动才能进行切换:是一个不错的体验! 如 ...

基于jQuery实现水平轮播效果

效果图

基于jQuery实现水平轮播效果相关推荐

最新文章

热门文章