<!--轮播图大盒子开始-->
<div class="wrap"><!--大盒子上部分轮播图--><div class="wrapUp"><ul><li class="cur"><a href="#"><img src="data:images/banner/banner01.jpg" alt=""></a></li><li><a href="#"><img src="data:images/banner/banner02.jpg" alt=""></a></li><li><a href="#"><img src="data:images/banner/banner03.jpg" alt=""></a></li><li><a href="#"><img src="data:images/banner/banner04.jpg" alt=""></a></li></ul><span class="btn left">&lt;</span><span class="btn right">&gt;</span></div><!--大盒子下部分标题--><div class="wrapDown"><ol><li class="cur">大牌特惠</li><li>住进北欧</li><li>绵绵爱意</li><li>母婴盛宴</li></ol><!--底部红色下划线--><span class="line"></span></div>
</div>

<style>*{margin: 0;padding:0;list-style: none}/*设置页面图片背景*/body{background:url("images/banner/bg.jpg")no-repeat center top;}/*大盒子样式宽高,盒子投影，内边距*/.wrap{width: 1170px;height: 452px;background:rgba(255,255,255,0.5);margin:30px auto;padding:12px 12px 0;box-sizing:border-box;box-shadow:0 0 10px rgba(0,0,0,0.4);overflow: hidden}
/*图片盒子宽高，定位样式*/.wrapUp{width: 1146px;height: 400px;position: relative;}.wrapUp li{position:absolute;left:0;top:0;display: none;}.wrapUp .cur{display: block;}/*盒子两边箭头样式*/.wrapUp .btn{width: 33px;height: 66px;background:rgba(0,0,0,0.2);position: absolute;color:#ffffff;font-size: 40px;line-height: 66px;text-align: center;font-family:"黑体";border-radius:5px;top:50%;transform:translateY(-50%);cursor: pointer;transition:0.3s}/*盒子左箭头样式*/.wrapUp .left{left: -45px}.wrapUp .right{right: -45px}/*盒子移入显示*/.wrap:hover .wrapUp .left{left:0}.wrap:hover .wrapUp .right{right:0}/*盒子不透明度变化*/.wrapUp .btn:hover{background:rgba(0,0,0,0.4);}/*大盒子下部分标题样式*/.wrapDown{width: 800px;height: 40px;margin:0 auto;position: relative}/*大盒子下部分内容li样式*/.wrapDown li{width: 200px;height: 40px;font-size: 15px;line-height: 40px;float: left;text-align: center;color: #666666;position: relative;cursor: pointer}/*每个li后面的分割线样式*/.wrapDown li:after{content:"|";position: absolute;right: 0;top:0;color: #cccccc}/*设置第一个li字样式*/.wrapDown .cur{color:red;}/*最后一个li不需要分割线*/.wrapDown li:last-child:after{display: none}/*底部红色下划线相对于底部盒子定位*/.wrapDown .line{width: 200px;height: 2px;background:deeppink;left: 0;bottom:-1px;position: absolute}</style>

<script>//鼠标以上通过索引值切换//图片//当前文字颜色$(".wrapDown li").mouseenter(function () {//定义变量接收索引值var index=$(this).index();console.log(index);play(index);//根据索引值图片/*  $(".wrapUp li").eq(index).stop().fadeIn().siblings().stop().fadeOut();//文字切换$(".wrapDown li").eq(index).addClass("cur").siblings().removeClass("cur");//滑动线切换$(".line").stop().animate({left:index*200},100)*/});//把切换封装成一个函数//自动播放//定义播放function play(aaa){$(".wrapUp li").eq(aaa).stop().fadeIn().siblings().stop().fadeOut();//文字切换$(".wrapDown li").eq(aaa).addClass("cur").siblings().removeClass("cur");//滑动线切换$(".line").stop().animate({left:aaa*200},100)}var timer=null;//先设置个定时器timer 让值为空var num=0;//需要有一个索引数字控制它动，初始为0var len=$(".wrapDown li").length;//需要有一个索引值和num对比,为li的个数。//封装自定义播放动画function autoplay() {timer=setInterval(function () {//此处的timer是给定时器赋值num++;if(num>len-1){num=0;}play(num);console.log(num);},1000);}//鼠标以上停止,鼠标离开调用自动播放$(".wrap").hover(function () {clearInterval(timer);},function () {autoplay();});
//箭头点击切换图片$(".right").click(function () {num++;if(num>len-1){num=0;}play(num);});$(".left").click(function () {num--;if(num<0){num=len-1;}play(num);});
</script>