jquery图片轮播

布满荆棘的人生 2022-04-22 05:32 359阅读 0赞

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>jquery轮播</title>  
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<style>  
\*\{  
margin: 0px;  
padding: 0px;  
\}  
.big\{  
width: 500px;  
height: 300px;  
margin: 10px auto;  
position: relative;/\*参照物\*/  
\}  
.pic\{  
width: 500px;  
height: 300px;  
border: 1px solid \#464646;  
\}  
.pic img\{  
position: absolute;/\*绝对定位\*/  
display: none;  
\}  
.arr\{  
width: 40px;  
height: 70px;  
font-size: 30px;  
font-weight: 900;  
line-height: 70px;  
text-align: center;  
color: \#ccc;  
position: absolute;  
top: 125px;  
display: none;  
cursor: pointer;  
\}  
.l-arr\{  
left: 0px;  
\}  
.r-arr\{  
right: 0px;  
\}  
.big:hover .arr\{  
display: block;  
\}  
.arr:hover\{  
background: rgba(0,0,0,0.3);  
color: \#fff;  
\}  
.but\{  
position: absolute;  
bottom: 15px;  
right: 12px;  
\}  
.but ul li\{  
list-style-type: none;  
width: 30px;  
height: 20px;  
/\*border: 1px solid \#ccc;\*/  
float: left;  
margin-left: 10px;  
text-align: center;  
font-family: "microsoft yahei";  
line-height: 20px;  
font-size: 12px;  
color: \#fff;  
background: rgba(0,0,0,0.3);  
cursor: pointer;  
\}  
.but ul li:hover\{  
background:rgba(0,0,0,0.7);  
\}  
.but .hover\{  
background:rgba(0,0,0,0.7);  
\}</style>  
</head>  
<body>  
<div class="big">  
<div class="pic">  
<img src="http://www.jq22.com/img/cs/500x300a.png" style="display:block;background:\#ccc">  
<img src="http://www.jq22.com/img/cs/500x300b.png">  
<img src="http://www.jq22.com/img/cs/500x300c.png">  
<img src="http://www.jq22.com/img/cs/500x300d.png">  
<img src="http://www.jq22.com/img/cs/500x300.png">  
</div>  
<div class="l-arr arr"> < </div>  
<div class="r-arr arr"> > </div>  
<div class="but">  
<ul>  
<li class="hover">1</li>  
<li>2</li>  
<li>3</li>  
<li>4</li>  
<li>5</li>  
</ul>  
</div>  
</div>

if (lIndex < 4) \{  
lIndex++; // lIndex = lIndex + 1;  
\} else \{  
lIndex = 0;  
\}

// (lIndex<4)?(lIndex++):(lIndex=0);

$(".but ul li").eq(lIndex).addClass("hover").siblings().removeClass("hover");  
$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut(); // 选中除了前面的图片的其他所有图片让其隐藏;fadeIn,fadeOut(慢慢淡入淡出)  
\});

$(".l-arr").click(function() \{  
if (lIndex > 0) \{  
lIndex--;  
\} else \{  
lIndex = 4;  
\}  
$(".but ul li").eq(lIndex).addClass("hover").siblings().removeClass("hover");  
$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut(); // siblings().hide选中除了前面的图片的其他所有图片让其隐藏;fadeIn,fadeOut(慢慢淡入淡出默认400毫秒；可以fadeOut（300）自己定义)  
\});

$(".but ul li").click(function() \{  
$(this).addClass("hover").siblings().removeClass("hover");  
var nIndex = $(this).index();  
$(".pic img").eq(nIndex).fadeIn(300).siblings().fadeOut(300);  
lIndex = nIndex;  
\});

function dingshi() \{  
setInterval(function() \{  
(lIndex < 4) ? (lIndex++) : (lIndex = 0);  
$(".but ul li").eq(lIndex).addClass("hover").siblings().removeClass("hover");  
$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut();  
\}, 1600);  
\};  
dingshi(); //执行  
\}  
aa();  
</script>

</body>  
</html>