JQuery实现仿京东轮播图
1.效果图
动态效果详解:
（1） 鼠标离开时,自动切换图片,底部小圆点按钮也跟着变化。
（2） 鼠标移入图片，显示左右箭头，停止自动轮播。
（3）鼠标移入左右箭头时，改变当前移入箭头的背景颜色。
（4）点击右边箭头，切换到下一张图片，对应下标的小圆点按钮样式改变。
（5）点击左边箭头，切换到上一张图片，对应下标的小圆点按钮样式改变。
（6）鼠标移入底部小圆点按钮，当前移入的小圆点按钮样式改变，且显示对应下标的图片。
2.html部分
2.1 思路分析
（1）首先要有一个p父盒子,用来显示当前图片,盒子宽高和图片宽高一致。
（2）p里包括三个子元素，一个ul标签，用来存放所有图片，两个p，一个用来放左右箭头，另一个放底部小圆点按钮。
2.2 代码
<p class="slider">
<!--ul中存放所有图片,图片大小保持一致-->
<ul>
<li>
<a href="#">
<img src="images/1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/8.jpg" alt="">
</a>
</li>
</ul>
<!--左右箭头-->
<p class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</p>
<!-- 小圆点按钮 -->
<p class="focus">
<i class="current"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
3.css部分
3.1 代码
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;/* 注意此处一定不要忘记定位 */
}
/* 所有li隐藏 */
.slider li {
position: absolute;
display: none;
}
/* 显示第一个li */
.slider li:first-child {
display: block;
}
/* 左右箭头默认隐藏 */
.arrow {
display: none;
}
/* 鼠标移入p,显示左右箭头 */
.slider:hover .arrow {
display: block;
}
/* 左右箭头样式 */
.arrow-left,
.arrow-right {
font-family: "simsun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
/* 鼠标移入箭头,改变背景颜色 */
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
/* 给底部小圆点按钮设置定位 */
.slider .focus {
position: absolute;
bottom: 20px;
left: 46px;
z-index: 1;
}
/* 给底部小圆点按钮设置样式 */
.slider .focus i {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
text-align: center;
}
/* current类名,用于事件处理时,给小圆点按钮动态添加类名,改变样式 */
.current {
background: #fff;
transition: .4s all;
}
</style>
4.js部分
<!-- 注意先引入jquery,再使用 -->
<script>
$(function () {
var index = 0;//用index记录下标,默认为0
var lis = $('.slider li');
//1.右边箭头点击事件
$('.arrow-right').click(right);
//右箭头点击事件处理函数
function right() {
index++;
//如果当前是最后一张,此时index=lis.length-1,index++后index=lis.length
// 此时应让index=0
if (index == lis.length) {
index = 0;
}
//显示对应下标的图片,让其他兄弟隐藏
lis.eq(index).fadein().siblings().fadeout();
//给对应下标的小圆点按钮添加current类名,其他兄弟移除current类名
$('.focus i').eq(index).addclass('current').siblings().removeclass('current');
}
//2.左边箭头点击事件
$('.arrow-left').click(function () {
index--;
//如果当前是第一张(index=0),index--后,index<0,此时应显示最后一张,让index=lis.length-1
if (index < 0) {
index = lis.length - 1;
}
//显示对应下标的图片,让其他兄弟隐藏
lis.eq(index).fadein().siblings().fadeout();
//给对应下标的小圆点按钮添加current类名,其他兄弟移除current类名
$('.focus i').eq(index).addclass('current').siblings().removeclass('current');
})
//3.底部圆点按钮鼠标移入事件
btns = $('.focus i');
for (var i = 0; i < btns.length; i++) {
//设置index属性,记录当前下标
btns.eq(i).attr('index', i);
//给btn注册鼠标移入事件
btns.eq(i).mouseenter(fn);
}
//btn的事件处理函数
function fn() {
var index = $(this).attr('index');
lis.eq(index).fadein().siblings().fadeout();
$(this).addclass('current').siblings().removeclass('current');
}
//4.自动轮播
//先执行一次定时器
var timeid = setinterval(function () {
right()
}, 3000)
//鼠标移出p时,设置定时器,调用右边箭头的点击事件
$('.slider').mouseleave(function () {
timeid = setinterval(function () {
right()
}, 3000)
})
//鼠标移入p时,清除定时器
$('.slider').mouseenter(function(){
clearinterval(timeid)
})
})
</script>
总结：
轮播图的实现思路基本一致，只要掌握了基本思路,就能很容易的写出来了。
以上的代码注释纯属个人理解，如有不足之处，望指正。
上一篇： 如何挑选杏子？吃杏子需要注意什么?