js实现图片轮播

时间：2023-03-09 01:48:47
js实现图片轮播

效果图

js实现图片轮播

1.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/stylesheets/common.css">
    <link rel="stylesheet" type="text/css" href="/stylesheets/base.css">
    <script type="text/javascript" src="/javascripts/jquery.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/javascripts/tony_tab.js"></script>
</head>
<body>
<!--焦点图-->
<div class="fouce fl">
    <div class="focus">
        <ul style=" width:1440px;left:0px;">
            <li><a href=" /></a><h3><a href="#" title="标题1">标题1标题1标题1标题1标题1</a></h3></li>
            <li><a href=" /></a><h3><a href="#" title="标题1">标题2标题2标题2标题2标题2</a></h3></li>
            <li><a href=" /></a><h3><a href="#" title="标题1">标题3标题3标题3标题3标题3</a></h3></li>
            <li><a href=" /></a><h3><a href="#" title="标题1">标题4标题4标题4标题4标题4</a></h3></li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript">
    jQuery(function() {
        $('.focus').slideFocus();
    });
</script>
</html>

2.调用的js（tony_tab.js）

/**
 * Created by zhangfanying on 2016/2/1.
 */
jQuery.fn.extend({
    slideFocus: function(){
        var This = $(this);
        var sWidth = $(This).width(),
            len=$(This).find('ul li').length,
            index  = ,
            Timer;
        // btn event
        var btn = "<div class='bullet-pagination'>";
        ; i < len; i++) {
            btn += "<a class='bullet'></a>";
        };
        btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
        $(This).append(btn);
        $(This).find().addClass('active');

        $(This).find('.bullet-pagination a').mouseover(function(){
            index = $(This).find('.bullet-pagination a').index(this);
            Tony(index);
        });

        $(This).find('.next').click(function(){
            index++;
            ;}
            Tony(index);
        });

        $(This).find('.pre').click(function(){
            index--;
            ){index = len - ;}
            Tony(index);
        });

        // start setInterval
        $(This).find('ul').css("width",sWidth * (len));
        $(This).hover(function(){
            clearInterval(Timer);
            show($(This).find('.preNext'));
        },function(){
            hide($(This).find('.preNext'));
            Timer=setInterval(function(){
                Tony(index);
                index++;
                ;}
            }, )
        }).trigger("mouseleave");

        function Tony(index){
            var new_width = -index * sWidth;
            $(This).find();
            $(This).find('.bullet-pagination a').stop(true,false).eq(index).addClass('active').siblings().removeClass('active');
        };

        // show hide
        function show(obj){ $(obj).stop(true,false).fadeIn();}
        function hide(obj){ $(obj).stop(true,false).fadeOut();}
    }
});

3.样式  common.css

.fouce{ position:relative; overflow:hidden; height:270px; width:360px;}
.fouce ul{  position:absolute;}
.fouce ul li{  float:left; }
.fouce ul li.on{ display:block;}
.fouce ul li a.img{ display:block; height:240px;}
.fouce ul li a img{ border:0px;}
.fouce ul li h3{ height:30px; line-height:30px; background-color:#ededed; text-align:center; font-size:14px;}
.fouce .bullet-pagination{ position:absolute; bottom:40px;}.next{ background:url(../images/web/news_arr_r.png) no-repeat left center; right:0px;}




4.样式base.css




*{padding:;margin:;list-style:none;}
body,html,input{font:12px/;}
body{background:#f1f1f1;}
body,html{ height:%;}
.fl{ float:left;}




相关文章