3种常用网站图片轮播切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 3种常用网站图片轮播切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <title>3种常用网站图片轮播切换代码</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css"/>
    <!--Luara样式文件-->
    <!--渐隐样式-->
    <link rel="stylesheet" href="css/luara.css"/>
    <!--左滑样式-->
    <link rel="stylesheet" href="css/luara.left.css"/>
    <!--上滑样式-->
    <link rel="stylesheet" href="css/luara.top.css"/>

</head>
<body>
    <script src="js/jquery-1.8.3.min.js"></script>
    <!--Luara js文件-->
    <script src="js/jquery.luara.0.0.1.min.js"></script>

    <h5>渐隐</h5>
    <hr/>
    <!--Luara图片切换骨架begin-->
    <div class="example">
        <ul>
            <li><img src="images/1.jpg" alt="1"/></li>
            <li><img src="images/2.jpg" alt="2"/></li>
            <li><img src="images/3.jpg" alt="3"/></li>
            <li><img src="images/4.jpg" alt="4"/></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!--Luara图片切换骨架end-->
    <script>
    $(function(){
        <!--调用Luara示例-->
        $(".example").luara({width:"500",height:"334",interval:4000,selected:"seleted"});

    });
    </script>

    <h5>上滑</h5>
    <hr/>
    <!--Luara图片切换骨架begin-->
    <div class="example1">
        <ul>
            <li><img src="images/1.jpg" alt="1"/></li>
            <li><img src="images/2.jpg" alt="2"/></li>
            <li><img src="images/3.jpg" alt="3"/></li>
            <li><img src="images/4.jpg" alt="4"/></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!--Luara图片切换骨架end-->
    <script>
        $(function(){
            $(".example1").luara({width:"500",height:"334",interval:5000,selected:"seleted",deriction:"top"});
        });
    </script>


    <h5>左滑</h5>
    <hr/>
    <!--Luara图片切换骨架begin-->
    <div class="example2">
        <ul>
            <li><img src="images/1.jpg" alt="1"/></li>
            <li><img src="images/2.jpg" alt="2"/></li>
            <li><img src="images/3.jpg" alt="3"/></li>
            <li><img src="images/4.jpg" alt="4"/></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!--Luara图片切换骨架end-->
    <script>
        $(function(){
            $(".example2").luara({width:"500",height:"334",interval:4500,selected:"seleted",deriction:"left"});
        });
    </script>
</body>
</html>

JS代码(jquery.luara.0.0.1.min.js):

jQuery.fn.extend({
	luara:function(a){
	function s(){
	var a;
	switch(j){
	case"top":a=h;
	break;
	case"left":a=h*g;
	break;
	default:a=h}
return a}
function t(){
	var a=b.find("img").eq(0),c={
}
;
	return c.width=a.width(),c.height=a.height(),c}
function u(b){
	var b=b||a.speed||l/6;
	return b>l?b=l:l>b&&0>b&&(b=arguments.callee(-b)),b}
function v(){
	q=setTimeout(function(){
	o++,e.eq(o-1).removeClass(n),o==g&&(o=0),r(),e.eq(o).addClass(n),v()}
,l)}
var q,r,b=$(this).eq(0),c=$(this).find("ul").eq(0),d=c.find("li"),e=$(this).find("ol").eq(0).find("li"),f=b.find("img"),g=f.length,a=a||{
}
,h=a.width||t().width,i=a.height||t().height,j=a.deriction||"",k="luara-"+j,l=(a.interval>0?a.interval:-a.interval)||3e3,m=u(),n=a.selected,o=0;
	b.width(h).height(i).addClass(k),c.width(s(j)).height(i),d.width(h).height(i),e.eq(0).addClass(n),function(){
	s=null,t=null,u=null}
(),r=function(){
	switch(j){
	case"top":return function(){
	c.animate({
	top:-i*o+"px"}
,m)}
;
	case"left":return function(){
	c.animate({
	left:-h*o+"px"}
,m)}
;
	default:return function(){
	d.hide().eq(o).fadeIn(m)}
}
}
(),e.mouseover(function(){
	e.eq(o).removeClass(n),o=e.index($(this)),$(this).addClass(n),r()}
),b.mouseenter(function(){
	clearTimeout(q)}
).mouseleave(function(){
	v()}
),v()}
}
);

CSS代码(luara.css):

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ luara version 0.1 2014-8-21\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*渐隐*/
.luara-{position:relative;padding:0;overflow:hidden;}
.luara- ul{padding:inherit;margin:0;}
.luara- ul li{display:none;padding:inherit;margin:inherit;list-style:none;}
.luara- ul li:first-child{display:block;}
.luara- ul li img{width:inherit;height:inherit;}

CSS代码(luara.left.css):

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ luara version 0.1 2014-8-21\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*左滑*/
.luara-left{position:relative;padding:0;overflow:hidden;}
.luara-left ul{position:relative;padding:inherit;margin:0;}
.luara-left ul li{float:left;padding:inherit;margin:inherit;list-style:none;}
.luara-left ul li img{width:inherit;height:inherit;}

CSS代码(luara.top.css):

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ luara version 0.1 2014-8-21\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*上滑*/
.luara-top{position:relative;padding:0;overflow:hidden;}
.luara-top ul{position:relative;padding:inherit;margin:0;}
.luara-top ul li{padding:inherit;margin:inherit;list-style:none;}
.luara-top ul li img{width:inherit;height:inherit;}

CSS代码(style.css):

/*reset*/
body{font-family:"microsoft yahei","微软雅黑";}
body,ul,li,ol,img{margin:0;padding:0;}
li{list-style:none;}
body{width:800px;height:auto;margin:0 auto;}
body>h5{margin-left:20px;}
body>div{margin-left:20px;}
/*example*/
.example{}
.example ol{position:relative;width:80px;height:20px;top:-30px;left:60px;}
.example ol li{float:left;width:10px;height:10px;margin:5px;background:#fff;}
.example ol li.seleted{background:#1AA4CA;}
.example1{}
.example1 ol{position:relative;width:80px;height:20px;top:-30px;left:60px;}
.example1 ol li{float:left;width:10px;height:10px;margin:5px;background:#fff;}
.example1 ol li.seleted{background:#1AA4CA;}
.example2{}
.example2 ol{position:relative;width:80px;height:20px;top:-30px;left:60px;}
.example2 ol li{float:left;width:10px;height:10px;margin:5px;background:#fff;}
.example2 ol li.seleted{background:#1AA4CA;}

附件:下载该文件资源,减少时间成本(增值服务)