jQuery实现呼吸轮播图_jquery

这篇文章主要为大家详细介绍了jQuery实现呼吸轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现呼吸轮播图的具体代码，供大家参考，具体内容如下

HTML

<div class=\”all\” id=\’box\’>
<div class=\”screen\”>
<ul>
<li><img src=\”images/01.jpg\” width=\”500\” height=\”200\” /></li>
<li><img src=\”images/02.jpg\” width=\”500\” height=\”200\” /></li>
<li><img src=\”images/03.jpg\” width=\”500\” height=\”200\” /></li>
<li><img src=\”images/04.jpg\” width=\”500\” height=\”200\” /></li>
<li><img src=\”images/05.jpg\” width=\”500\” height=\”200\” /></li>
</ul>
<ol>
<li class=\”current\”>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<div id=\”arr\”>
<span id=\”left\”>&lt;</span>
<span id=\”right\”>&gt;</span>
</div>
</div>

CSS

* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}

.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}

.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}

.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}

.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 2500px;
}

.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}

.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}

.all ol li.current {
background: yellow;
}

#arr {
display: none;
}

#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: \’黑体\’;
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}

#arr #right {
right: 5px;
left: auto;
}

JS代码

$(function () {
var index = 0;
//鼠标移入
$(\’#box\’).mouseenter(function(){
$(\’#arr\’).show();
})
//鼠标移出
$(\’#box\’).mouseleave(function(){
$(\’#arr\’).hide();
})
$(\’#right\’).click(function(){
if(index == $(\’.screen>ul>li\’).length-1){ //最后一张
index = 0;
}else {
index++;
}
$(\’.screen>ul>li\’).eq(index).fadeIn(200).siblings(\’li\’).fadeOut(200);
//下方页码对应高亮
$(\’.screen>ol>li\’).eq(index).addClass(\’current\’).siblings(\’li\’).removeClass(\’current\’)
})
$(\’#left\’).click(function(){
if(index == 0){ //第一张
index = $(\’.screen>ul>li\’).length-1;
}else {
index–;
}
$(\’.screen>ul>li\’).eq(index).fadeIn(200).siblings(\’li\’).fadeOut(200);
//下方页码对应高亮
$(\’.screen>ol>li\’).eq(index).addClass(\’current\’).siblings(\’li\’).removeClass(\’current\’)
})
//页码点击轮播图片
$(\’.screen>ol>li\’).click(function(){
index = $(this).index()
$(\’.screen>ul>li\’).eq(index).fadeIn(200).siblings(\’li\’).fadeOut(200);
$(\’.screen>ol>li\’).eq(index).addClass(\’current\’).siblings(\’li\’).removeClass(\’current\’)
})
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持3399IT网。

本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com