超完美滚动轮播图

约定不等于承诺〃 2022-04-22 05:34 251阅读 0赞

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>超完美滚动轮播图</title>  
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>  
<style>  
\* \{  
margin:0px;  
padding:0px;  
\}  
.banner \{  
width:500px;  
height:300px;  
margin:150px auto;  
position:relative;  
overflow:hidden;  
cursor:pointer;  
\}  
.banner ul \{  
list-style:none;  
width:700%;  
height:300px;  
position:absolute;  
\}  
.banner ul li \{  
width:500px;  
height:300px;  
float:left;  
\}  
.banner ul li img \{  
width:100%;  
height:100%;  
\}  
.banner .arrow .left,.banner .arrow .right \{  
width:40px;  
height:80px;  
background:\#000000;  
opacity:0.3;  
position:absolute;  
top:50%;  
transform:translateY(-50%);  
font-family:"宋体";  
font-size:52px;  
color:\#fff;  
line-height:80px;  
text-align:center;  
\}  
.arrow .left \{  
left:0px;  
\}  
.arrow .right \{  
right:0px;  
\}  
.banner .arrow \{  
display:none;  
\}  
/\*鼠标经过盒子，让箭头显示出来\*/  
.banner:hover .arrow \{  
display:block;  
cursor:pointer;  
\}  
/\*小圆点样式\*/  
.banner ol \{  
list-style:none;  
width:200px;  
height:20px;  
background:\#222222;  
position:absolute;  
bottom:50px;  
left:50%;  
transform:translateX(-50%);  
/\*opacity:0.3;  
\*/  
border-radius:10px;  
\}  
.banner ol li \{  
width:10px;  
height:10px;  
background:\#fff;  
border-radius:50%;  
float:left;  
margin-left:21px;  
margin-top:5px;  
cursor:pointer;  
\}  
.banner ol .now \{  
background:aqua;  
\}  
</style>  
</head>  
<body>  
<div class="banner">  
<ul>  
<li><img src="http://www.jq22.com/img/cs/500x300-1.png"></li>  
<li><img src="http://www.jq22.com/img/cs/500x300-2.png"></li>  
<li><img src="http://www.jq22.com/img/cs/500x300-3.png"></li>  
<li><img src="http://www.jq22.com/img/cs/500x300-4.png"></li>  
<li><img src="http://www.jq22.com/img/cs/500x300-5.png"></li>  
<li><img src="http://www.jq22.com/img/cs/500x300-6.png"></li>  
  
<li><img src="http://www.jq22.com/img/cs/500x300-7.png"></li>  
</ul>  
<div class="arrow">  
<span class="left"><</span>  
<span class="right">></span>  
</div>  
  
<ol>  
<li class="now"></li>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
<li></li>  
</ol>  
</div>

//点击小圆点让图片移动  
$.each(Point, function(index, value) \{ //如果此处我没有用each循环来写，那么我便需要用$(this).index()方法来获取图片的下标  
//让点击的小圆点有class样式，其他li没有class样式  
Point.eq(index).on('click', function() \{  
$(this).addClass('now').siblings().removeClass('now');  
Ul.stop().animate(\{  
'left': -index \* Width  
\});  
Index = index;  
console.log(Index);  
//alert(Index);  
\})  
\});

// 点击右箭头,ul往左跑  
Right.on('click', function() \{  
//需要做一个判断，如果发现此时图片是最后一张图片，就不能继续执行了  
//让index是图片的张数减一的时候,让index不继续加  
if (Index >= 6) \{  
//让index变成0  
Index = 0;  
// 让ul的left值瞬间变成0  
Ul.css('left', 0);  
\}  
Index++;  
Ul.stop().animate(\{  
'left': -Index \* Width  
\});

if (Index == 6) \{  
//因为在图片最后面添加了一张假图片，其实最后一张图片的时候，需要对应的是索引0的小圆点  
Point.eq(0).addClass('now').siblings().removeClass('now');

\} else \{  
Point.eq(Index).addClass('now').siblings().removeClass('now');  
\}

\})

//点击左箭头,让Ul往右跑  
Left.on('click', function() \{  
if (Index <= 0) \{  
//return; 此时不应该return,应该让index变成最大的值，left也变成最大的left  
Index = 6;  
Ul.css('left', -Index \* Width);  
\}  
Index--;  
Ul.stop().animate(\{  
'left': -Index \* Width  
\});

if (Index == 6) \{  
//因为在图片最后面添加了一张假图片，其实最后一张图片的时候，需要对应的是索引0的小圆点  
Point.eq(0).addClass('now').siblings().removeClass('now');  
\} else \{  
Point.eq(Index).addClass('now').siblings().removeClass('now');  
\}

\})

//调取Right方法，使其自动播放  
var time = setInterval(function() \{  
Right.click();  
\}, 2000);

//鼠标移到banner中,自动播放停止  
banner.mouseenter(function() \{  
clearInterval(time);  
\});

// 鼠标移出banner中,自动播放开始  
banner.mouseleave(function() \{  
time = setInterval(function() \{  
Right.click();  
\}, 2000);  
\})  
\})  
</script>

</body>  
</html>