13-轮播实现(各种)
Posted 大白1#
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了13-轮播实现(各种)相关的知识，希望对你有一定的参考价值。
无缝轮播实现（比较考验逻辑思维）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } .slider-list{ width: 580px; overflow: hidden; margin: 100px auto; position: relative; } .slider-list .slider-wrapper{ height: 470px; } .slider-wrapper ul{ height: 100%; position: relative; } .slider-wrapper ul li{ float: left; width: 590px; height: 470px; } .slider-wrapper ul li a{ display: block; width: 100%; height: 100%; } .focus-img{ width: 590px; height: 470px; } button{ position: absolute; width: 24px; height: 40px; top: 50%; line-height: 40px; text-align: center; background-color: rgba(0,0,0,.2); color: white; font-size: 30px; border: 0; outline: none; cursor: pointer; z-index: 99; } button.next{ right: 0; } button.prev{ left: 0; } .slider-index{ position: absolute; bottom: 10px; left:250px; z-index: 2; } .slider-index span{ display: inline-block; width: 10px; height: 10px; border: 2px solid red; border-radius: 50%; } .slider-index span.active{ background-color: orange; } </style> </head> <body> <div class="slider-list"> <div class="slider-wrapper"> <ul> </ul> </div> <button class="next">></button> <button class="prev"><</button> <div class="slider-index"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 1.获取本地图片数据 590*470 var imgArr = [‘./5.jpg‘,‘./1.jpg‘,‘./2.jpg‘,‘./3.jpg‘,‘./4.jpg‘,‘./5.jpg‘,‘./1.jpg‘]; // 获取图片的宽度 var imgWidth = 590; var len = $(‘span‘).length; // 2.遍历数据 将图片添加到ul中 for(let i = 0;i < imgArr.length;i++){ let width = i*imgWidth; $(`<li> <a href="javascript:;"> <img src=${imgArr[i]} alt=${i}> </a> </li>`).appendTo(‘.slider-wrapper ul‘).addClass(‘slider-item‘) } // 设置图片的类名 $(‘img‘).addClass(‘focus-img‘); // 设置父盒子的总宽度 $(‘.slider-wrapper‘).width((imgArr.length+1)*imgWidth); $(‘.slider-wrapper ul‘).width((imgArr.length+1)*imgWidth); // 初始化 // 默认显示第一张图片 init(); function init(){ $("ul").css("left",-imgWidth); } // 下一张 $(‘button.next‘).click(function(event) { next(); }); // 控制图片显示第几张 var count = 1; function next(){ if (count ==len+1) { count = 2; $("ul").css("left",-imgWidth); }else{ count++; } $(‘.slider-wrapper ul‘).stop().animate({left:-count*imgWidth},200); // 控制轮播图索引改变颜色 if (count>len) { $("span").eq(0).addClass("active").siblings("span").removeClass("active"); }else{ $("span").eq(count-1).addClass("active").siblings("span").removeClass("active"); } } // 给小圆圈添加点击事件 $(‘span‘).click(function(){ //自己的样式 $(this).addClass("active").siblings("span").removeClass("active"); count = $(this).index()+1; $("ul").animate({"left":-count*imgWidth},200); }) setInterval(next,2000); }) </script> </body> </html>
模仿京东轮播图效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,ol{ list-style: none;}
.wrapper{
width: 580px;
height: 240px;
margin: 100px auto;
/*overflow: hidden;*/
position: relative;
}
.wrapper ul{
width: 100%;
height: 240px;
overflow: hidden;
}
.wrapper ul li{
float: left;
width: 580px;
height: 240px;
}
ol{
position: absolute;
right: 0;
bottom: 10px;
width: 190px;
}
ol li{
float: left;
width: 20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: pointer;
background-color: #abc;
}
ol li.current{
background-color: pink;
}
</style>
<script type="text/javascript" src="./jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 根据ol下li的索引号，匹配ul下相对应li的索引号
$(".wrapper ol li").mouseenter(function () {
$(this).addClass("current").siblings().removeClass("current");
$(".wrapper ul li").eq($(this).index()).stop().fadeIn("fast").siblings().stop().fadeOut();
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul>
<li><img src="./1.jpg" /></li>
<li><img src="./2.jpg" /></li>
<li><img src="./3.jpg" /></li>
<li><img src="./4.jpg" /></li>
<li><img src="./5.jpg" /></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
以上是关于13-轮播实现(各种)的主要内容，如果未能解决你的问题，请参考以下文章