下面是一段轮播图的代码
<li><a href="#"><img src="img/huandengpian_1.jpg" /></a></li>
<li><a href="#"><img src="img/huandengpian_2.jpg" /></a></li>
<li><a href="#"><img src="img/huandengpian_3.jpg" /></a></li>
<li><a href="#"><img src="img/huandengpian_4.jpg" /></a></li>
<li><a href="#"><img src="img/huandengpian_5.jpg" /></a></li>
<li><a href="#"><img src="img/huandengpian_6.jpg" /></a></li>
</ul>
<!--轮播图布局结束-->
</div>
<div class="showNav">
<!--侧边栏布局开始-->
<ul>
<li><img src="img/huandengpian_1s.jpg" alt=""></li>
<li><img src="img/huandengpian_2s.jpg" alt=""></li>
<li><img src="img/huandengpian_3s.jpg" alt=""></li>
<li><img src="img/huandengpian_4s.jpg" alt=""></li>
<li><img src="img/huandengpian_5s.jpg" alt=""></li>
<li><img src="img/huandengpian_6s.jpg" alt=""></li>
</ul>
<!--侧边栏布局结束-->
</div>
下面是样式的代码
接下来就是轮播图的重点jquery 部分了
代码如下 ：
<script>
$(function(){
var oneWidth = $('.slideShow').find('ul li').eq(0).width()
//定义变量 获取图片的宽度
var timer = null ;
//定义定时器的返回值 主要用于关闭定时器
var iNow = 0 ;
//iNow 为正在展示的图片的索引值，当用户打开网页是 显示的是第一张图片 所以索引值为0
$('.showNav ul li').on('click',function(){
//为每个侧边导航图片注册点击事件
var index = $(this).index();
// alert('我被点了');
//获取触发事件元素的索引值
iNow = index ;
$('.slideShow>ul').stop()
//这里的意思是进行动画之前停止之前缓存的动画
$('.slideShow>ul').animate({
// .animate()方法 执行CSS样式的自定义动画 只有数字的值可以创建
"left":-oneWidth*iNow,
//这里用到left 属性 所以 ul样式中需要设置 position: relative; 让ul左移N 个图片大小的宽度，N根据被点击的按钮索引值iNOW确定
});
});
function autoPlay(){
timer=setInterval(function(){
//打开定时器
iNow++;
//让图片的索引值次序加1，这样就可以实现顺序轮播图效果
if(iNow>$('.showNav ul li').length-1){
//当到达最后一张图的时候，让iNow赋值为第一张图的索引值
iNow=0;
}
$('.showNav ul li:eq('+iNow+')').trigger("click");
//模拟触发侧边图片导航的click
},2000);
//2000为轮播的时间
}
//调用函数
autoPlay() ;
})
</script>
<script src="jquery.js"></script>
可以说写到这 简单的轮播图效果就完成了
但是在运行过程中发现了一些问题 ，但我们点击侧边导航时，或者点击轮播图本身时候 ，轮播只是稍微暂停一下 就会继续动画效果。 这跟我们预想中 ，点击侧边导航或者鼠标放在轮播图上轮播图效果停止播放 ，这种效果不一样 ，于是有对其代码进行了一些优化
最终代码如下
<script>
$(function(){
var oneWidth = $('.slideShow').find('ul li').eq(0).width()
//定义变量 获取图片的宽度
var timer = null ;
//定义定时器的返回值 主要用于关闭定时器
var iNow = 0 ;
//iNow 为正在展示的图片的索引值，当用户打开网页是 显示的是第一张图片 所以索引值为0
$('.showNav ul li').on('click',function(){
//为每个侧边导航图片注册点击事件
var index = $(this).index();
// alert('我被点了');
//获取触发事件元素的索引值
iNow = index ;
$('.slideShow>ul').stop()
//这里的意思是进行动画之前停止之前缓存的动画
$('.slideShow>ul').animate({
// .animate()方法 执行CSS样式的自定义动画 只有数字的值可以创建
"left":-oneWidth*iNow,
//这里用到left 属性 所以 ul样式中需要设置 position: relative; 让ul左移N 个图片大小的宽度，N根据被点击的按钮索引值iNOW确定
});
});
function autoPlay(){
timer=setInterval(function(){
//打开定时器
iNow++;
//让图片的索引值次序加1，这样就可以实现顺序轮播图效果
if(iNow>$('.showNav ul li').length-1){
//当到达最后一张图的时候，让iNow赋值为第一张图的索引值
iNow=0;
}
$('.showNav ul li:eq('+iNow+')').trigger("click");
//模拟触发侧边图片导航的click
},2000);
//2000为轮播的时间
}
// 创建一个封装函数 触发事件使自动轮播效果停止
function stop(){
$('.slideShow>ul').on('mouseover',function(){
clearInterval(timer);
});
$('.slideShow>ul').on('mouseout',function(){
autoPlay()
});
}
//调用函数
stop() ;
autoPlay() ;
})
</script>
<script src="jquery.js"></script>
