|
实现效果：
1.背景为轮播大图，下面为轮播图片的缩略图。 2.左右轮播有过度效果 3.无限轮播 4.自动轮播CSS样式： *{
padding: 0;
margin: 0;
}
/*注：为了快速写出样式，有些宽高使用的px*/
body{
width: 100%;
height: 100%;
}
.XianShi{
width: 100%;
height: 250px;
background-color: rgba(0,0,0,.5);
position: absolute;
bottom: 0;
padding: 25px 0;
}
#imgBox{
overflow: hidden;
width: 2210px;
height: 250px;
position: absolute;
left: 0;
top: 0;
}
#imgBox li{
width: 250px;
height: 250px;
float: left;
margin-left: 30px;
list-style: none;
overflow: hidden;
}
#imgBox li:nth-child(1){
margin-left: 0;
}
#imgBox li img{
width: 499.2px;
height: 280.8px;
}
#bgImg{
width: 100%;
height: 100%;
}
#bgImg img{
width: 1920px;
height: 960px;
}
#right,#left{
width: 100px;
height: 100%;
position: fixed;
top: 0;
z-index: 10;
top: 0;
z-index: 10;
opacity: 0;
transition: all .5s ease;
}
#left{
left: 0;
/*设置左右移动按钮的过度效果，效果见下图*/
background: -webkit-linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.6));
}
#right{
right: 0;
background: -webkit-linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0.6));
}
#right:hover,#left:hover{
opacity: 1;
}
.tupiantiao{
width: 1650px;
height: 250px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.guoDu{
transition: all .5s ease;
}此处为鼠标没有移入左移时的效果： 图片：wu.png  此处是鼠标移入左移box的hover效果： 图片：you.png 有一个从左向右的透明渐变。 HTML部分: <div id="bgImg"><img id="bg" src="img/2.jpg"></div>
<!-- 显示轮播框 -->
<div class="XianShi">
<div class="tupiantiao">
<ul id="imgBox" class="guoDu" style="left: -280px;">
<li data-index="0"><img src="img/1.jpg"></li>
<li data-index="1"><img src="img/2.jpg"></li>
<li data-index="2"><img src="img/3.jpg"></li>
<li data-index="3"><img src="img/4.jpg"></li>
<li data-index="4"><img src="img/5.jpg"></li>
<li data-index="5"><img src="img/6.jpg"></li>
<li data-index="6"><img src="img/7.jpg"></li>
<li data-index="7"><img src="img/8.jpg"></li>
</ul>
</div>
</div>
<!-- 左右切换图片按钮 -->
<div id="left"></div>
<div id="right"></div>js部分：需要引用jQuery//获取的节点
var chidNo1;
var chidNoLast;
//自动移动计时器
var moveAuto;
//左右移动等待计时器
var transitionLWith;
var transitionRWith;
//左右移动添加过度效果计时器
var addguoDuL;
var addguoDuR;
// 设置一个变量，当这个变量为false，说明异步操作没有结束
var moveOver = true;
//储存到现在下标的位置顺序
var theLiIndexArr = [];
//自动播放
for(let i = 0 ;i<document.getElementsByTagName("li").length;i++){
theLiIndexArr.push(document.getElementsByTagName("li")[i].getAttribute("data-index"));
}
moveAuto = setTimeout(leftMove,2000);
$("#left").click(leftMove);
$("#right").click(rightMove);
//左移动
function leftMove(){
if(moveOver){
moveOver = false;
//获取第一个li元素
chidNo1 = document.getElementsByTagName("li")[0];
// 先改变left值运行动画效果，再使用计时器等待动画效果结束
document.getElementById("imgBox").style.left = "-560px"
transitionLWith = setTimeout(removeLImg,500);
}
}
function removeLImg(){
//移除第一个li节点
$(".imgBox li:eq(0)").remove()
//添加获取的第一个子节点在最后一个位置
document.getElementById("imgBox").appendChild(chidNo1);
//移出过度效果
$("#imgBox").removeClass("guoDu");
//改变ul的left，使ul的位置回到默认位置，由于移出了过度效果，页面不会有改变
document.getElementById("imgBox").style.left = "-280px";
//使用计时器添加过度效果的class
addguoDuL = setTimeout(addClassguoDu,500);
//改变背景大图
var theSrc = $("#imgBox img:eq(1)")[0].getAttribute("src");
$("#bg").attr("src",theSrc);
//清除调用函数的计时器
clearTimeout(transitionLWith);
}
//右移动
function rightMove(){
if(moveOver){
moveOver = false;
// 获取最后一个子元素
chidNoLast = document.getElementsByTagName("li")[document.getElementsByTagName("li").length - 1];
//使用计时器达到过度动画效果
document.getElementById("imgBox").style.left = "0px";
transitionRWith = setTimeout(removeRImg,500)
}
}
function removeRImg(){
//移除最后一个li元素
document.getElementById("imgBox").removeChild(document.getElementsByTagName("li")[document.getElementsByTagName("li").length - 1]);
//移出最后一个元素后获取所有li元素
var NodeArr = $("li");
//移除所有li元素
$("li").remove;
//添加之前最后一个li元素在第一位
document.getElementById("imgBox").appendChild(chidNoLast);
//添加所有的li元素
for(let i = 0 ; i<NodeArr.length; i++){
document.getElementById("imgBox").appendChild(NodeArr[i]);
}
//移除过度效果后把ul的位置改变为默认位置
$("#imgBox").removeClass("guoDu");
document.getElementById("imgBox").style.left = "-280px";
//使用计时器添加过度效果class
addguoDuR = setTimeout(addClassguoDu,500);
// 改变背景大图位置
var theSrc = $("#imgBox img:eq(1)")[0].getAttribute("src");
$("#bg").attr("src",theSrc);
clearTimeout(transitionRWith);
}
//自动移动优化
function auToMoveL(){
clearTimeout(moveAuto);
moveAuto = setTimeout(leftMove,2000);
}
//添加过度效果
function addClassguoDu(){
$("#imgBox").addClass("guoDu");
theLiIndexArr = [];
for(let i = 0 ;i<document.getElementsByTagName("li").length;i++){
theLiIndexArr.push(document.getElementsByTagName("li")[i].getAttribute("data-index"));
}
clearTimeout(addguoDuL);
clearTimeout(addguoDuR);
moveOver = true;
auToMoveL()
}html+css+js：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>成都彭于晏</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100%;
}
.XianShi{
width: 100%;
height: 250px;
background-color: rgba(0,0,0,.5);
position: absolute;
bottom: 0;
padding: 25px 0;
}
#imgBox{
overflow: hidden;
width: 2210px;
height: 250px;
position: absolute;
left: 0;
top: 0;
}
#imgBox li{
width: 250px;
height: 250px;
float: left;
margin-left: 30px;
list-style: none;
overflow: hidden;
}
#imgBox li:nth-child(1){
margin-left: 0;
}
#imgBox li img{
width: 499.2px;
height: 280.8px;
}
#bgImg{
width: 100%;
height: 100%;
}
#bgImg img{
width: 1920px;
height: 960px;
}
#right,#left{
width: 100px;
height: 100%;
position: fixed;
top: 0;
z-index: 10;
top: 0;
z-index: 10;
opacity: 0;
transition: all .5s ease;
}
#left{
left: 0;
background: -webkit-linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.6));
}
#right{
right: 0;
background: -webkit-linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0.6));
}
#right:hover,#left:hover{
opacity: 1;
}
.tupiantiao{
width: 1650px;
height: 250px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.guoDu{
transition: all .5s ease;
}
</style>
</head>
<body>
<div id="bgImg"><img id="bg" src="img/2.jpg"></div>
<!-- 显示轮播框 -->
<div class="XianShi">
<div class="tupiantiao">
<ul id="imgBox" class="guoDu" style="left: -280px;">
<li data-index="0"><img src="img/1.jpg"></li>
<li data-index="1"><img src="img/2.jpg"></li>
<li data-index="2"><img src="img/3.jpg"></li>
<li data-index="3"><img src="img/4.jpg"></li>
<li data-index="4"><img src="img/5.jpg"></li>
<li data-index="5"><img src="img/6.jpg"></li>
<li data-index="6"><img src="img/7.jpg"></li>
<li data-index="7"><img src="img/8.jpg"></li>
</ul>
</div>
</div>
<!-- 左右切换图片按钮 -->
<div id="left"></div>
<div id="right"></div>
<script src="js/jq.js"></script>
<script>
//获取的节点
var chidNo1;
var chidNoLast;
//自动移动计时器
var moveAuto;
//左右移动等待计时器
var transitionLWith;
var transitionRWith;
//左右移动添加过度效果计时器
var addguoDuL;
var addguoDuR;
// 设置一个变量，当这个变量为false，说明异步操作没有结束
var moveOver = true;
//储存到现在下标的位置顺序
var theLiIndexArr = [];
//自动播放
for(let i = 0 ;i<document.getElementsByTagName("li").length;i++){
theLiIndexArr.push(document.getElementsByTagName("li")[i].getAttribute("data-index"));
}
moveAuto = setTimeout(leftMove,2000);
$("#left").click(leftMove);
$("#right").click(rightMove);
//左移动
function leftMove(){
if(moveOver){
moveOver = false;
//获取第一个li元素
chidNo1 = document.getElementsByTagName("li")[0];
// 先改变left值运行动画效果，再使用计时器等待动画效果结束
document.getElementById("imgBox").style.left = "-560px"
transitionLWith = setTimeout(removeLImg,500);
}
}
function removeLImg(){
//移除第一个li节点
$(".imgBox li:eq(0)").remove()
//添加获取的第一个子节点在最后一个位置
document.getElementById("imgBox").appendChild(chidNo1);
//移出过度效果
$("#imgBox").removeClass("guoDu");
//改变ul的left，使ul的位置回到默认位置，由于移出了过度效果，页面不会有改变
document.getElementById("imgBox").style.left = "-280px";
//使用计时器添加过度效果的class
addguoDuL = setTimeout(addClassguoDu,500);
//改变背景大图
var theSrc = $("#imgBox img:eq(1)")[0].getAttribute("src");
$("#bg").attr("src",theSrc);
//清除调用函数的计时器
clearTimeout(transitionLWith);
}
//右移动
function rightMove(){
if(moveOver){
moveOver = false;
// 获取最后一个子元素
chidNoLast = document.getElementsByTagName("li")[document.getElementsByTagName("li").length - 1];
//使用计时器达到过度动画效果
document.getElementById("imgBox").style.left = "0px";
transitionRWith = setTimeout(removeRImg,500)
}
}
function removeRImg(){
//移除最后一个li元素
document.getElementById("imgBox").removeChild(document.getElementsByTagName("li")[document.getElementsByTagName("li").length - 1]);
//移出最后一个元素后获取所有li元素
var NodeArr = $("li");
//移除所有li元素
$("li").remove;
//添加之前最后一个li元素在第一位
document.getElementById("imgBox").appendChild(chidNoLast);
//添加所有的li元素
for(let i = 0 ; i<NodeArr.length; i++){
document.getElementById("imgBox").appendChild(NodeArr[i]);
}
//移除过度效果后把ul的位置改变为默认位置
$("#imgBox").removeClass("guoDu");
document.getElementById("imgBox").style.left = "-280px";
//使用计时器添加过度效果class
addguoDuR = setTimeout(addClassguoDu,500);
// 改变背景大图位置
var theSrc = $("#imgBox img:eq(1)")[0].getAttribute("src");
$("#bg").attr("src",theSrc);
clearTimeout(transitionRWith);
}
//自动移动优化
function auToMoveL(){
clearTimeout(moveAuto);
moveAuto = setTimeout(leftMove,2000);
}
//添加过度效果
function addClassguoDu(){
$("#imgBox").addClass("guoDu");
theLiIndexArr = [];
for(let i = 0 ;i<document.getElementsByTagName("li").length;i++){
theLiIndexArr.push(document.getElementsByTagName("li")[i].getAttribute("data-index"));
}
clearTimeout(addguoDuL);
clearTimeout(addguoDuR);
moveOver = true;
auToMoveL()
}
</script>
</body>
</html> |
|
公众号
