自己写的轮播代码
来张样式效果图
先贴HTML样式
<body>
<div id = "wrap">
<div id="lunbo-img">
<img src="images/lunbo01.jpg" alt="" width="500" height="750">
<img src="images/lunbo02.jpg" alt="" width="500" height="750">
<img src="images/lunbo03.jpg" alt="" width="500" height="750">
<img src="images/lunbo04.jpg" alt="" width="500" height="750">
<img src="images/lunbo05.jpg" alt="" width="500" height="750">
<img src="images/lunbo06.jpg" alt="" width="500" height="750">
<img src="images/lunbo07.jpg" alt="" width="500" height="750">
</div>
<ul id = "lunboNum">
<li class="currentNum">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</body>
css样式
*{
margin:0px; padding:0px;
}
body{
background: #999;
}
li{
line-height: 50px;
margin:5px auto;
list-style: none;
width:80px;
height: 50px;
color:#C0FF3E;
font-size: 30px;
background: #9370DB;
cursor: pointer;
}
img{
cursor: pointer;
}
div#wrap{/*包裹层*/
width:600px;
height:750px;
background:#312347;
margin:0px auto;
}
div#lunbo-img img:not(:first-of-type){/*除了第一张图片其他全部隐藏*/
display:none;
}
div#lunbo-img img{
float:left;
}
div#wrap ul{
text-align:center;
width:100px;
float:right;
}
.currentNum{
background:#90EE90;
color:#8A2BE2;
}
</style>
jquery 代码
<script >
$(function() {
var currentIndex;//当前索引值
var picTotal = $("img").length;//当前照片数量
var ToDisplayPicNumber = 0;//当前自动轮播索引值
$("li").each(function() {//获取li并且绑定点击事件
$(this).click(function(){
displayPic(this);
ToDisplayPicNumber = $(this).index();
})
})
function displayPic(obj){
currentIndex = $(obj).index();
//ToDisplayPicNumber = currentIndex;
$(obj).siblings().removeClass("currentNum").end().addClass("currentNum");
$("#lunbo-img").children().hide();
$("#lunbo-img img").eq(currentIndex).fadeIn();
}
var l = setInterval(function(){//定时器
autoDisplayPic();
},2000);
function autoDisplayPic(){//轮播代码
ToDisplayPicNumber = (ToDisplayPicNumber + 1) % picTotal;
$("li").eq(ToDisplayPicNumber).trigger("click");
}
$("img").mouseover(function() {//鼠标移入图片清除定时器
clearInterval(l);
}).mouseout(function() {
l = setInterval(function(){//鼠标移出图片恢复定时器
autoDisplayPic();
},2000);
})
})
</script>
时间： 2024-12-05 04:50:49