亲，好用的jquery焦点图轮换，亲，还带缩略图哦

2019独角兽企业重金招聘Python工程师标准>>>

 

下面先给出js

$(document).ready(function() {
    var i_curIndex = 0;
    var beauBeauSlide; //函数对象
    var i_curID = 0; //取得鼠标下方的对象ID
    var pictureID = 0; //索引ID
    $("#i_focus_piclist li").eq(0).show(); //默认
    autoScroll();
    $("#i_focus_btn li").hover(function() {
        StopScrolll();
        $("#i_focus_btn li").removeClass("i_cur") //所有的li去掉当前的样式加上正常的样式
        $(this).addClass("i_cur"); //而本身则加上当前的样式去掉正常的样式
        i_curID = $(this).attr("id"); //取当前元素的ID
        pictureID = i_curID.substring(i_curID.length - 1); //取最后一个字符
        $("#i_focus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示
        $("#i_focus_piclist li").not($("#i_focus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏
        $("#i_focus_tx li").hide();
        $("#i_focus_tx li").eq(pictureID).show();
 
    },
    function() {
        //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
        i_curID = $(this).attr("id"); //取当前元素的ID
        pictureID = i_curID.substring(i_curID.length - 1); //取最后一个字符
        i_curIndex = pictureID;
        autoScroll();
    });
    //自动滚动
    function autoScroll() {
        $("#i_focus_btn li:last").removeClass("i_cur");
        $("#i_focus_tx li:last").hide();
        $("#i_focus_btn li").eq(i_curIndex).addClass("i_cur");
        $("#i_focus_btn li").eq(i_curIndex - 1).removeClass("i_cur");
        $("#i_focus_tx li").eq(i_curIndex).show();
        $("#i_focus_tx li").eq(i_curIndex - 1).hide();
        $("#i_focus_piclist li").eq(i_curIndex).fadeIn("slow");
        $("#i_focus_piclist li").eq(i_curIndex - 1).hide();
        i_curIndex++;
        i_curIndex = i_curIndex >= 3 ? 0 : i_curIndex;
        beauBeauSlide = setTimeout(autoScroll, 2000);
    }
    function StopScrolll() //当鼠标移动到对象上面的时候停止自动滚动
    {
        clearTimeout(beauBeauSlide);
    }
});});

接着是html

<!--*第一个幻灯*--> 
<div id="i_focus"> 
<div id="i_focus_pic"> 
<ul id="i_focus_piclist" style="left:0; top:0;"> 
<li><a href="http://mrthink.net/" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt="www.MrThink.net" /></a></li> 
<li><a href="http://mrthink.net/" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt="www.MrThink.net" /></a></li> 
<li><a href="http://mrthink.net/" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt="www.MrThink.net" /></a></li> 
</ul> 
<div id="i_focus_opdiv"></div> 
<!--slide大图374*224--> 
<ul id="i_focus_tx"> 
<li class="normal"><span>Springs Best Accessories</span>The 7 key trends for the season b2</li> 
<li class="normal"><span>HAHAHAHAAH HAHA haha OHOH</span>THINK EVERY DAY</li> 
<li class="normal"><span>Okay okay okay okay</span>scrip jquery ue seo</li> 
</ul> 
</div> 
<!--slide右侧小缩略图75*70--> 
<ul id="i_focus_btn"> 
<li class="i_cur" id="p0"><img src="http://img.ffffound.com/static-data/assets/6/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt="www.MrThink.net" /></li> 
<li id="p1"><img src="http://img.ffffound.com/static-data/assets/6/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt="www.MrThink.net" /></li> 
<li id="p2"><img src="http://img.ffffound.com/static-data/assets/6/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt="www.MrThink.net" /></li> 
</ul> 
</div> 
<!--//end-->

最后是css

/*第一个幻灯样式--Modified@Mr.Think*/
#i_focus{width:460px; height:231px;background:#eee; padding:5px 5px 0 5px; margin:0 auto }
#i_focus_pic{width:376px; height:226px;display:inline; position:relative;float:left;overflow:hidden}
#i_focus_piclist { position:absolute}
#i_focus_piclist li { width:378px; height:226px; overflow:hidden; display:none}
#i_focus_piclist img { width:374px; height:224px; border:1px solid #fff}
#i_focus_btn {float:right; width:77px}
#i_focus_btn li {cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)}
#i_focus_btn img { width:75px; height:70px; border:1px solid #fff; margin-bottom:2px}
#i_focus_btn .i_cur {opacity:1; -moz-opacity:1; filter:alpha(opacity=100)}
#i_focus_opdiv { position:absolute; left:0; bottom:0; width:374px; height:40px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); border:1px solid #fff; border-top:0}
#i_focus_tx span{font-family:"微软雅黑"; font-size:16px; font-weight:bold; line-height:22px; display:block}
#i_focus_tx { position:absolute; left:8px; bottom:2px; color:#FFF}
#i_focus_tx .normal {display:none}

很好用的，只要修改一下CSS就可以变化成你想要的样子。有不清楚的可以留言讨论。

转载于:https://my.oschina.net/bojinzhu/blog/29740