简单轮播图

标签：display   absolute   run   style   cti   color   pad   tin   auto   

（一）html：

<title>jquery实现轮播图</title>
<link rel="stylesheet" href="icon/iconfont.css">

<div id="slider">
<img src="img/1.jpg" style="display:block;">
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/4.jpg" >
<ul>
<li style="background:#f00"></li>s
<li></li>
<li></li>
<li></li>
</ul>
<i class="iconfont icon-zuo"></i>
<i class="iconfont icon-you"></i>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="jquery来实现轮播图.js"></script>

(二)、css：

* {
margin: 0;
padding: 0;
}
li,ul,ol {
list-style-type:none;
}
#slider {
width:945px;
height:288px;
position:relative;
margin:100px auto;

}
#slider>img {
display:none;
position:absolute;
left:0;
top:0;
}
ul {
position:relative;
left:400px;
top:260px;
}
ul>li {
width:20px;
height:20px;
background:#ddd;
float:left;
border-radius:50%;
margin-left:20px;
}
#slider>.icon-zuo {
font-size:30px;
color:#ddd;
position:absolute;
left:30px;
top:50%;
transform:translateY(-50%);
}
#slider>.icon-zuo:hover {
color:#f00;
}
#slider>.icon-you {
font-size:30px;
color:#ddd;
position:absolute;
right:30px;
top:50%;
transform:translateY(-50%);
font-weight:bold;
}
#slider>.icon-you:hover {
color:#f00;
}

（三）、js：

var c = 0;  //c是一个变量；

var timer = setInterval(run,1000);

function run(){ // 设置定时器；
c++;
c = c==4?0:c; //三元表达式 这里的第二个等号是两个等于号；

$("#slider img").eq(c).fadeIn().siblings(‘img‘).fadeOut();
$("#slider ul li").eq(c).css(‘background‘,‘#f00‘).siblings(‘li‘).css(‘background‘,‘#ddd‘);
};
$("#slider").hover(function(){
clearInterval(timer);

},function(){
timer = setInterval(run,1000);
});
$("#slider ul li").mouseenter(function(){ // 鼠标移入小圆点的效果；

c=$(this).index(); // 获得 的当前鼠标移入的li的序号；

$("#slider img").eq(c).fadeIn().siblings(‘img‘).fadeOut();
$("#slider ul li").eq(c).css(‘background‘,‘#f00‘).siblings(‘li‘).css(‘background‘,‘#ddd‘);
})

简单轮播图

标签：display   absolute   run   style   cti   color   pad   tin   auto   

原文地址：https://www.cnblogs.com/lu-ki/p/9742332.html