前言

刚刚学了javascript有了一点点小基础之后感觉,原来使用jQuery+CSS就可以实现图片切换轮播效果是那么简单的事情你再也不用使用javascript去写一大堆繁琐的代码了搞了个小米商城官网淡入淡出轮播图效果来看看其实很简单学一点jquery你就可以自己造轮子啦! 哈哈哈哈怎么不相信吗？看下面的代码吧!

准备工作

肯定是先准备jQuery库文件，没有的朋友去官网下载，说过很多遍了哈! 嗯嗯好的!

然后是准备几张图片。大小你也可以随意! 我这里找的是2452 x 920大小的如图

nerror="javascript:errorimg.call(this);">

接下来废话不多说直接上代码!

HTML代码结构

<div id="banner"><!--图片--><div class="pic">    <img src=https://news.xinpinbuyi.com/skin/default/image/nopic.gif width="800px" height="300px" alt="" title="" style="display: block;">    <img src=https://news.xinpinbuyi.com/skin/default/image/nopic.gif width="800px" height="300px" alt="" title="">    <img src=https://news.xinpinbuyi.com/skin/default/image/nopic.gif width="800px" height="300px" alt="" title="">    <img src=https://news.xinpinbuyi.com/skin/default/image/nopic.gif width="800px" height="300px" alt="" title="">    <img src=https://news.xinpinbuyi.com/skin/default/image/nopic.gif width="800px" height="300px" alt="" title=""></div><div class="btn">        <ul>            <li class="active"></li>            <li></li>            <li></li>            <li></li>            <li></li>        </ul></div></div>

CSS样式代码

*{    margin: 0;    padding: 0;}#banner{    width: 800px;    height: 300px;    margin: 150px auto;    position: relative;}#banner .pic{    width: 800px;    height: 300px;}#banner .pic>img{    position: absolute;    top: 0px;    left: 0px;    display: none;}#banner>.btn{    width:100px;    height: 20px;    position: absolute;    bottom: 10px;    left: 50%;    margin-left: -50px;}#banner .btn ul{    list-style: none;}#banner .btn ul li{    width: 6px;    height: 6px;    border: 2px solid #757575;    border-color: rgba(255,255,255,0.3);    border-radius: 50%;    display: inline-block;    text-align: center;    margin: 0 3px;    background: rgba(0,0,0,0.4);    cursor: pointer;}#banner .btn ul li.active{     background: rgba(255,255,255,0.4);     border-color: rgba(0,0,0,0.4);}

jQuery代码逻辑 ⚽

$(function(){var timer=null;var  index=0;$("#banner .btn ul>li").hover(    function(){        index=$(this).index();        $(this).addClass('active').siblings().removeClass('active');        $("#banner .pic>img").eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();    },    function(){});//自动播放timer=setInterval(Play,1000);function Play(){    index++;    index%=5;      $("#banner .btn ul>li").eq(index).addClass('active').siblings().removeClass('active');    $("#banner .pic>img").eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();}$("#banner").hover(    function(){        clearInterval(timer);    },    function(){        timer=setInterval(Play,1000);    });})