jQuery实现各种轮播图

无限循环滚动

百叶窗

轮播一

轮播二

轮播三

无限循环滚动

        * {margin: 0;padding: 0;}div {width: 1120px;height: 300px;border: 1px solid #000;margin: 100px auto;overflow: hidden;}ul {list-style: none;width: 3360px;height: 300px;background: #000;/* background: rgba(255, 0, 0, .5); */}ul>li {float: left;}

    <div><ul><li><img src="img/0.jpg" alt=""></li><li><img src="img/1.jpg" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/3.jpg" alt=""></li><li><img src="img/0.jpg" alt=""></li><li><img src="img/1.jpg" alt=""></li></ul></div>

        $(function() {//0.定义变量，保存偏移位let offset = 0;//1.让图片滚动起来let timer = null;function autoPlay() {timer = setInterval(function() {offset += -10;if (offset <= -2240) {offset = 0;}$("ul").css("marginLeft", offset);}, 50);}autoPlay();//2.监听li移入和移出事件$("li").hover(function() {//停止滚动clearInterval(timer);//给非当前选中添加蒙版$(this).siblings().fadeTo(100, 0.5);//去除当前选中的蒙版$(this).fadeTo(100, 1);}, function() {//继续滚动autoPlay();//去除所有蒙版$("li").fadeTo(100, 1);});});

百叶窗

<script src="js/jquery-1.12.3.min.js"></script><style>* {margin: 0;padding: 0}.container {width: 800px;height: 300px;margin: 80px auto;position: relative;border: 1px solid;/* 溢出部分隐藏 */overflow: hidden;}.container ul {list-style: none}.container li {position: absolute}.cover {/*制作遮罩层 *//* width: 560px; 或*/width: 100%;height: 300px;background: rgba(0, 0, 0, .5);position: absolute}.li1 {left: 160px;}.li2 {left: 320px;}.li3 {left: 480px;}.li4 {left: 640px;}</style>

<div class="container"><ul><li class="li0"><div class="cover"></div><img src="img/0.jpg" alt="" /></li><li class="li1"><div class="cover"></div><img src="img/1.jpg" alt="" /></li><li class="li2"><div class="cover"></div><img src="img/2.jpg" alt="" /></li><li class="li3"><div class="cover"></div><img src="img/3.jpg" alt="" /></li><li class="li4"><div class="cover"></div><img src="img/4.jpg" alt="" /></li></ul></div>

  <script>// 获得元素var $lis = $('.container li');//给li添加进入和移出事件（控制明暗变化）// find() 方法返回被选元素的后代元素// stop() 方法为被选元素停止当前正在运行的动画// fadeOut()用于淡出可见元素$lis.mouseenter(function() {$(this).find('.cover').stop(true).fadeOut();}).mouseleave(function() {$lis.stop(true);$(this).find('.cover').stop(true).fadeIn();$lis.eq(1).animate({"left": 160}, 500);$lis.eq(2).animate({"left": 320}, 500);$lis.eq(3).animate({"left": 480}, 500);$lis.eq(4).animate({"left": 640}, 500);})//给li添加事件（控制位置）$('.li0').mouseenter(function() {$lis.stop(true);$lis.eq(1).animate({"left": 560}, 500);$lis.eq(2).animate({"left": 620}, 500);$lis.eq(3).animate({"left": 680}, 500);$lis.eq(4).animate({"left": 740}, 500);})$('.li1').mouseenter(function() {$lis.stop(true);$lis.eq(1).animate({"left": 60}, 500);$lis.eq(2).animate({"left": 620}, 500);$lis.eq(3).animate({"left": 680}, 500);$lis.eq(4).animate({"left": 740}, 500);})$('.li2').mouseenter(function() {$lis.stop(true);$lis.eq(1).animate({"left": 60}, 500);$lis.eq(2).animate({"left": 120}, 500);$lis.eq(3).animate({"left": 680}, 500);$lis.eq(4).animate({"left": 740}, 500);})$('.li3').mouseenter(function() {$lis.stop(true);$lis.eq(1).animate({"left": 60}, 500);$lis.eq(2).animate({"left": 120}, 500);$lis.eq(3).animate({"left": 180}, 500);$lis.eq(4).animate({"left": 740}, 500);})$('.li4').mouseenter(function() {$lis.stop(true);$lis.eq(1).animate({"left": 60}, 500);$lis.eq(2).animate({"left": 120}, 500);$lis.eq(3).animate({"left": 180}, 500);$lis.eq(4).animate({"left": 240}, 500);})</script>

轮播一

<style>.banner {width: 500px;height: 300px;border: 1px solid lightgray;margin: 50px auto;overflow: hidden;display: flex;position: relative;}.banner img {width: 100%;height: 100%;}/*设置小圆点的容器，利用flex布局使其居中*/.banner .points {position: absolute;color: #fff;width: 100%;bottom: 10px;height: 30px;display: flex;justify-content: center;align-items: center;}/* 设置每个小圆点的样式 */.banner .point {background-color: skyblue;width: 10px;height: 10px;border-radius: 50%;margin: 5px;cursor: pointer;}.points .active {background-color: #f40;}/* 制作左右箭头 */.banner .left-btn,.banner .right-btn {z-index: 999;color: #fff;font-weight: 900;position: absolute;background-color: rgba(0, 0, 0, .2);height: 20px;width: 20px;display: flex;justify-content: center;align-items: center;cursor: pointer;margin-top: 140px;}.banner .left-btn {margin-left: -20px;}.banner .right-btn {margin-left: 500px;justify-content: center;}</style>

 <div class="banner"><img src="./images/beijing/0.jpg" alt="" data-href='#0'><img src="./images/beijing/1.jpg" alt="" data-href='#1'><img src="./images/beijing/2.jpg" alt="" data-href='#2'><img src="./images/beijing/3.jpg" alt="" data-href='#3'><!--左右箭头--><div class="left-btn"><</div><div class="right-btn">></div><!--小圆点--><div class="points"><div class="point active" data-page='0'></div><div class="point" data-page='1'></div><div class="point" data-page='2'></div><div class="point" data-page='3'></div></div></div>

 <script src="./js/jquery-1.12.3.min.js"></script><script>$(function() {var count = 0; //记录轮播的张数var timer = null;var time = 2000; //每张轮播的时间  毫秒//图片切换var imgChange = function() {$('.banner img').first().stop().animate({"margin-left": "-" + 500 * count + "px"}, 500)};//小圆点切换var pointChange = function() {$(".point").removeClass('active'); //排他操作$(".point[data-page='" + count + "']").addClass('active');}//周期切换图片与小圆点var timerStart = function() {clearInterval(timer); //开始之前先清除timer = setTimeout(function() {count++;count = count % 4;imgChange();pointChange();}, time)};//点击小圆点切换对应的图片$(".banner .point").click(function() {count = parseInt($(this).attr("data-page"));imgChange();pointChange();timerStart();})//当点击左右时，实现切换$(".banner .left-btn").click(function() {count--;count = count < 0 ? 0 : count;imgChange();pointChange();timerStart();})$(".banner .right-btn").click(function() {count++;count %= 4;imgChange();pointChange();timerStart();})//当鼠标移入banner区域时左右按钮显示，反之隐藏$(".banner").mouseenter(function() {$(".banner .left-btn").stop().animate({"margin-left": "0px"}, 500)$(".banner .right-btn").stop().animate({"margin-left": "480px"}, 500)})$(".banner").mouseleave(function() {$(".banner .left-btn").stop().animate({"margin-left": "-20px"}, 500)$(".banner .right-btn").stop().animate({"margin-left": "500px"}, 500)})timerStart();})
</script>

轮播二

 <link rel="stylesheet" href="css/indexjQuery.css"><script src="js/jquery-3.5.1.min.js"></script><script src="js/indexJquery.js"></script>

 <div id="container"><div id="list" style="left: -600px;"><img src="img/5.jpg" alt="1" /><img src="img/1.jpg" alt="1" /><img src="img/2.jpg" alt="2" /><img src="img/3.jpg" alt="3" /><img src="img/4.jpg" alt="4" /><img src="img/5.jpg" alt="5" /><img src="img/1.jpg" alt="5" /></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow">&lt;</a><a href="javascript:;" id="next" class="arrow">&gt;</a></div>

* {margin: 0;padding: 0;text-decoration: none;
}body {padding: 20px;
}#container {width: 600px;height: 400px;overflow: hidden;position: relative;margin: 45px auto;
}#list {width: 4200px;height: 400px;position: absolute;z-index: 1;
}#list img {float: left;
}/* 小圆点区域 */#buttons {position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;
}#buttons span {cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background: #333;margin-right: 5px;
}#buttons .on {background: orangered;
}/* 按钮区域 */.arrow {cursor: pointer;display: none;line-height: 39px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;position: absolute;z-index: 2;top: 180px;background-color: RGBA(0, 0, 0, .3);color: #fff;
}.arrow:hover {background-color: RGBA(0, 0, 0, .7);
}#container:hover .arrow {display: block;
}#prev {left: 20px;
}#next {right: 20px;
}

$(function() {//获取元素var container = $('#container');var list = $('#list');var buttons = $('#buttons span');var prev = $('#prev');var next = $('#next');var index = 1; //存放当前显示的图片的下标var len = 5;var interval = 3000; //位移时间间隔var timer;function animate(offset) {var left = parseInt(list.css('left')) + offset;// 边界判断if (offset > 0) {offset = '+=' + offset;} else {offset = '-=' + Math.abs(offset);}list.animate({ 'left': offset }, 300, function() {if (left > -200) {list.css('left', -600 * len);}if (left < (-600 * len)) {list.css('left', -600);}});}//亮起小圆点function showButton() {//当前图片的小圆点亮起，其他小圆点不亮buttons.eq(index - 1).addClass('on').siblings().removeClass('on');}// 鼠标离开图片区域时，轮播继续function play() {timer = setTimeout(function() {next.trigger('click');play();}, interval);}//鼠标进入图片区域时，停止轮播function stop() {clearTimeout(timer);}// 右按钮点击事件next.bind('click', function() {// 判断当前是否在动画if (list.is(':animated')) {return;}// 判断当前图片是否是最后一张if (index == 5) {index = 1;} else {index += 1;}animate(-600);showButton();});// 左按钮事件prev.bind('click', function() {// 判断当前是否在动画if (list.is(':animated')) {return;}// 判断当前图片是否是第一张if (index == 1) {index = 5;} else {index -= 1;}animate(600);showButton();});// 小圆点点击事件buttons.each(function() {$(this).bind('click', function() {// 判断当前是否在进行动画if (list.is(':animated') || $(this).attr('class') == 'on') {return;}// 获取属性var myIndex = parseInt($(this).attr('index'));//计算偏移量var offset = -600 * (myIndex - index);animate(offset);//切换后，更新当前的偏移量index = myIndex;showButton();})});container.hover(stop, play);play();});

轮播三

核心：

旧的图片淡出、新的图片淡入
鼠标单击左右按钮，图片进行左右切换
鼠标点击相应的锚点，图片就自动切换到锚点对应的图片
但鼠标既没有单击左右按钮也没有单击锚点时，图片就按一定周期自动循环轮播

<script src="js/jquery-1.12.3.min.js"></script><style>* {margin: 0;padding: 0;user-select: none;}.swiper {width: 560px;height: 300px;border: 1px solid;margin: 80px auto;position: relative}.swiper .imgURL {list-style: none;padding: 0}.swiper .imgURL li {position: absolute;display: none}.swiper .imgURL .selectLi {display: block}.leftBtn,.rightBtn {position: absolute;width: 30px;height: 50px;background-color: rgba(0, 0, 0, .3);font-size: 25px;top: 40%;text-align: center;line-height: 50px;cursor: pointer;}.rightBtn {right: 0}.leftBtn:hover,.rightBtn:hover {color: #fff;background-color: rgba(0, 0, 0, .5);}.swiper .maodianUl {list-style: none;position: absolute;padding: 0;bottom: 10px;left: 35%;}.swiper .maodianUl li {display: inline-block;width: 22px;height: 22px;background-color: orange;text-align: center;line-height: 22px;border-radius: 50%;}.swiper .maodianUl .selectMaoDian {background-color: purple}.swiper .maodianUl li a {text-decoration: none;color: white}
</style>

 <div class="swiper"><ul class="imgURL"><li class="selectLi"><a href="#"><img src="img/0.jpg" alt="" /></a></li><li><a href="#"><img src="img/1.jpg" alt="" /></a></li><li><a href="#"><img src="img/2.jpg" alt="" /></a></li><li><a href="#"><img src="img/3.jpg" alt="" /></a></li><li><a href="#"><img src="img/4.jpg" alt="" /></a></li></ul><div class="leftBtn"><</div><div class="rightBtn">></div><ul class="maodianUl"><li class="selectMaoDian"><a href="#">0</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li></ul></div>

 <script>//获得元素var $leftBtn = $('.leftBtn');var $rightBtn = $('.rightBtn');//获取页面中所有的图片livar $lis = $('.imgURL li');//获取所有锚点的livar $maodians = $('.maodianUl li')//表示当前显示的li的序号var index = 0;var timer = null;$rightBtn.click(function() {//防止动画积累的方法：只要jq对象在执行动画，就忽略任何的触发if ($lis.is(':animated')) {return;}//旧的怎么样，新的怎么样$lis.eq(index).fadeOut();$maodians.eq(index).removeClass('selectMaoDian');index++;//当已经时最后一张时，点击切换到第一张if (index == 5) {index = 0;}//新的淡入$lis.eq(index).fadeIn();$maodians.eq(index).addClass('selectMaoDian');});$leftBtn.click(function() {//防止动画积累的方法：只要jq对象在执行动画，就忽略任何的触发if ($lis.is(':animated')) {return;}$lis.eq(index).fadeOut();$maodians.eq(index).removeClass('selectMaoDian');index--;//当已经时最后一张时，点击切换到第一张if (index == -1) {index = 4;}$lis.eq(index).fadeIn();$maodians.eq(index).addClass('selectMaoDian');})//锚点添加事件$maodians.mouseenter(function() {//旧的淡出，并给锚点取消背景$lis.eq(index).fadeOut();$maodians.eq(index).removeClass('selectMaoDian');//index()方法返回当前节点在兄弟节点中的序号，从0开始计算。index = $(this).index();//console.log(index);//新的淡入，并给锚点添加背景$lis.eq(index).fadeIn();$maodians.eq(index).addClass('selectMaoDian');});//自动播放(定时器)timer = setInterval(function() {//防止动画积累的方法：只要jq对象在执行动画，就忽略任何的触发if ($lis.is(':animated')) {return;}//旧的怎么样，新的怎么样$lis.eq(index).fadeOut();$maodians.eq(index).removeClass('selectMaoDian');index++;//当已经时最后一张时，点击切换到第一张if (index == 5) {index = 0;}$lis.eq(index).fadeIn();$maodians.eq(index).addClass('selectMaoDian');}, 3000);</script>

jQuery实现各种轮播图相关推荐

html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
jQuery实现异形轮播图
思路: 异形轮播图与普通轮播图不同的一点,是异形轮播图一次性展示多个图片,且图片大小的位置会动态变化. 以往我的处理办法都是直接给要展示的图片动态的添加一个class类, 简单粗暴.这次我在很多地方都 ...
html新闻轮播插件,jQuery新闻类轮播图插件sliderBox
sliderBox.js是一款jQuery新闻类轮播图插件.该jQuery新闻类轮播图插件可以创建兼容ie8.带缩略图导航.以及多种过渡效果的轮播图. 使用方法在页面中引入jQuery.slider ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
html5carousel图片轮播,jquery 3d Carousel轮播图插件
jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件.该jquery Carousel轮播图插件兼容ie8浏览器,提供丰富的参数和API方法由于控制 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
jquery手写轮播图_jquery 实现轮播图详解及实例代码_jquery_脚本之家
轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写 ...
JQuery实现圆点轮播图自动播放
用jquery实现轮播图实现之后的效果实现思路 1,每次只显示一张图片其他的图片隐藏起来 2,每一次轮播相应位置的小圆点跟着变色 3,鼠标移入小圆点时显示相应的图片源代码 <!DOCTY ...
使用jQuery完成无缝轮播图案例
前言: 一.前面给大家讲了关于css的一些有趣的小案例,这一期来给大家介绍下jQuery,jQuery的使用相比较js的使用比较简单,因为jQuery会自动给你生成循环函数,使代码简洁,相比较js实现 ...
jQuery实现碎片轮播图
碎片轮播图: 碎片轮播图顾名思义就是像碎片拼接而成的轮播图,若干个小方块碎片通过动画效果拼接成一张完整的图片. 实现原理: 轮播图的通常功能,都包括这几个部分,核心就是通过图片的索引值控制页面切换: ...

jQuery实现各种轮播图

无限循环滚动

百叶窗

轮播一

轮播二

轮播三

jQuery实现各种轮播图相关推荐

最新文章

热门文章