效果演示：  

HTML+CSS+JS实现 ❤️touchSlider图片滚动图片轮播❤️_html5

代码目录：

HTML+CSS+JS实现 ❤️touchSlider图片滚动图片轮播❤️_css_02

主要代码实现：

CSS样式：

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

body {
    width: 100%;
    margin: 0 auto;
    overflow: hidden
}

/* main_image */

.main_visual {
    height: 422px;
    border-top: 1px solid #d7d7d7;
    overflow: hidden;
    position: relative;
}

.main_image {
    height: 422px;
    overflow: hidden;
    position: relative;
}

.main_image ul {
    width: 9999px;
    height: 422px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0
}

.main_image li {
    float: left;
    width: 100%;
    height: 422px;
}

.main_image li span {
    display: block;
    width: 100%;
    height: 422px
}

.main_image li a {
    display: block;
    width: 100%;
    height: 422px
}

.main_image li .img_1 {
    background: url('../images/img_main_1.jpg') center top no-repeat
}

.main_image li .img_2 {
    background: url('../images/img_main_2.jpg') center top no-repeat
}

.main_image li .img_3 {
    background: url('../images/img_main_3.jpg') center top no-repeat
}

.main_image li .img_4 {
    background: url('../images/img_main_4.jpg') center top no-repeat
}

.main_image li .img_5 {
    background: url('../images/img_main_5.jpg') center top no-repeat
}

div.flicking_con {
    position: absolute;
    top: 360px;
    left: 50%;
    z-index: 999;
    width: 300px;
    height: 21px;
    margin: 0 0 0 -50px;
}

div.flicking_con a {
    float: left;
    width: 21px;
    height: 21px;
    margin: 0;
    padding: 0;
    background: url('../images/btn_main_img.png') 0 0 no-repeat;
    display: block;
    text-indent: -1000px
}

div.flicking_con a.on {
    background-position: 0 -21px
}

#btn_prev,
#btn_next {
    z-index: 11111;
    position: absolute;
    display: block;
    width: 73px !important;
    height: 74px !important;
    top: 50%;
    margin-top: -37px;
    display: none;
}

#btn_prev {
    background: url(../images/hover_left.png) no-repeat left top;
    left: 100px;
}

#btn_next {
    background: url(../images/hover_right.png) no-repeat right top;
    right: 100px;
}

HTML代码 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>jQuery宽屏满屏焦点图切换特效touchSlider插件</title>

    <link type="text/css" href="css/style.css" rel="stylesheet" />

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
    <script type="text/javascript" src="js/jquery.touchSlider.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $(".main_visual").hover(function() {
                $("#btn_prev,#btn_next").fadeIn()
            }, function() {
                $("#btn_prev,#btn_next").fadeOut()
            });

            $dragBln = false;

            $(".main_image").touchSlider({
                flexible: true,
                speed: 200,
                btn_prev: $("#btn_prev"),
                btn_next: $("#btn_next"),
                paging: $(".flicking_con a"),
                counter: function(e) {
                    $(".flicking_con a").removeClass("on").eq(e.current - 1).addClass("on");
                }
            });

            $(".main_image").bind("mousedown", function() {
                $dragBln = false;
            });

            $(".main_image").bind("dragstart", function() {
                $dragBln = true;
            });

            $(".main_image a").click(function() {
                if ($dragBln) {
                    return false;
                }
            });

            timer = setInterval(function() {
                $("#btn_next").click();
            }, 5000);

            $(".main_visual").hover(function() {
                clearInterval(timer);
            }, function() {
                timer = setInterval(function() {
                    $("#btn_next").click();
                }, 5000);
            });

            $(".main_image").bind("touchstart", function() {
                clearInterval(timer);
            }).bind("touchend", function() {
                timer = setInterval(function() {
                    $("#btn_next").click();
                }, 5000);
            });

        });
    </script>
</head>

<body>

    <div class="main_visual">
        <div class="flicking_con">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
        </div>
        <div class="main_image">
            <ul>
                <li><span class="img_3"></span></li>
                <li><span class="img_4"></span></li>
                <li><span class="img_1"></span></li>
                <li><span class="img_2"></span></li>
                <li><span class="img_5"></span></li>
            </ul>
            <a href="javascript:;" id="btn_prev"></a>
            <a href="javascript:;" id="btn_next"></a>
        </div>
    </div>
    <!--main_visual end-->

</body>

</html>

上面的图片和js需要引入