jquery实现服务体系图文轮播介绍页面效果代码-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
代码描述：jquery实现服务体系图文轮播介绍页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
     <style>
         /* 公共样式表css */
html,body {
    color: #333;
    margin: 0;
    height: 100%;
    font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #000;
}

img {
    border: 0;
}

body {
    background: #fff;
    color: #666;
}

html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #08acee;
}

button {
    outline: 0;
}

img {
    border: 0;
}

button,input,optgroup,select,textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
}

li {
    list-style: none;
}

a {
    color: #666;
}

a:hover {
    color: #eee;
}

.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
}

/* 必要布局样式css */
.marketing {
    background: black;
    height: 782px;
    overflow: hidden;
}

.marketing-title {
    text-align: center;
    font-size: 32px;
    color: #FFF;
    padding-top: 91px;
    margin-bottom: 15px;
}

.marketing-text {
    text-align: center;
    display: block;
    font-size: 14px;
    color: #888888;
}

.click_a {
    width: 94px;
    height: 42px;
    margin: 0 auto;
    padding-top: 65px;
}

.hover_L {
    float: left;
}

.click_a a {
    display: block;
    width: 42px;
    height: 42px;
    overflow: hidden;
}

.hover_R {
    float: right;
}

.click_a img {
    display: block;
    float: left;
}

.click_a a:hover img {
    margin-top: -42px;
}

.mark-main {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 506px;
}

.click_con {
    width: 100%;
    padding-top: 90px;
    overflow: hidden;
    margin-left: -133px;
}

.system_list {
    width: 360px;
    height: 416px;
    position: relative;
    background: #FaFafa;
    margin: 0 5px;
    float: left;
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.system_list_tit {
    padding: 34px 30px;
    border-bottom: 1px solid #ededed;
}

.system_list_tit span {
    display: block;
    overflow: hidden;
}

.system_list_tit span em {
    display: block;
    width: 4px;
    height: 20px;
    background: #ff9900;
    float: left;
    margin-right: 10px;
}

.system_list_tit span strong {
    display: block;
    float: left;
    font-size: 20px;
    line-height: 20px;
    color: #333;
}

.system_list_tit p {
    display: block;
    font-size: 12px;
    color: #999;
    padding-top: 12px;
}

.system_list_con {
    padding: 47px 28px 0px 28px;
}

.mark-main-list {
    overflow: hidden;
    margin-bottom: 30px;
}

.mark-main-list span {
    display: block;
    width: 48px;
    height: 48px;
    float: left;
    margin-right: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.mark-main-list p {
    display: block;
    overflow: hidden;
    padding: 4px 0;
}

.mark-main-list span img {
    width: 100%;
}

.mark-main-list p em {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    font-style: normal;
}

.mark-main-list p strong {
    display: block;
    font-size: 12px;
    line-height: 20px;
    color: #888;
}

.layer-mask {
    width: 100%;
    height: 416px;
    opacity: 0.3;
    transition: all 1s;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}

.click_con .new_cur .layer-mask {
    opacity: 0;
}

.click_con .new_cur {
    z-index: 10;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
}

     </style>
     <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
     <script>
         $(function() {

	var con_w = $(".mark-main").width()
		, list_w = con_w / 4
		, mar_l = list_w / 2;
	$(".system_list").css("width", list_w);
	$(".click_con").css("margin-left", -mar_l);
	var stye_list = $(".mark-main").width() + 10;
	var system = ($(".system_list").length) * stye_list;
	$(".click_con").css("width", system + 'px');
	$(".hover_R").click(function() {
		var index = $(".new_cur").index() + 1;
		var system1 = $(".system_list").length;
		var wid1 = $(".system_list").width() + 10;
		//960
		var uwid = $(".mark-main").scrollLeft();
		var val_ = uwid + wid1;
		$(".new_cur").next().addClass("new_cur").siblings().removeClass("new_cur");
		$(".mark-main").animate({
			scrollLeft: wid1
		}, function() {
			$(".click_con .system_list:first").insertAfter($(".click_con .system_list:last"));
			$(".mark-main").scrollLeft(0);
		});
	});
	$(".hover_L").click(function() {
		var index = $(".new_cur").index();
		var wid1 = $(".system_list").width() + 10;
		var uwid = $(".mark-main").scrollLeft();
		var val_ = uwid - wid1;
		$(".new_cur").prev().addClass("new_cur").siblings().removeClass("new_cur");
		$(".mark-main").scrollLeft(wid1);
		$(".click_con .system_list:last").insertBefore($(".click_con .system_list:first"));
		$(".mark-main").animate({
			scrollLeft: 0
		});
	})

});
     </script>
    </head>
    <body>



        <div class="marketing">
            <div class="marketing-title ">功能全、营销体系完整</div>
            <p class="marketing-text ">20款商城营销功能、41款应用插件仍在不断更新</p>
            <div class="click_a">
                <a href="javascript:;" class="hover_L">
                    <img src="//repo.bfw.wiki/bfwrepo/image/60d857d944357.png" alt="">
                </a>
                <a href="javascript:;" class="hover_R">
                    <img src="//repo.bfw.wiki/bfwrepo/image/60d857eb13105.png" alt="">
                </a>
            </div>
            <div class="mark-main">
                <div class="click_con" style="margin-left: -180px; width: 8700px;">
                    <div class="system_list" style="width: 360px;">
                        <div class="system_list_tit">
                            <span>
                                <em></em>
                                <strong>促销</strong>
                            </span>
                            <p>多样营销，带来流量与销量</p>
                        </div>
                        <div class="system_list_con">
                            <div class="mark-main-list">
                                <span>
                                    <img src="//repo.bfw.wiki/bfwrepo/image/60d857fe66e5d.png" alt="">
                                </span>
                                <p>
                                    <em>会员卡</em>
                                    <strong>会员卡可享受更高折扣</strong>
                                </p>
                            </div>
                            <div class="mark-main-list">
                                <span>
                                    <img src="//repo.bfw.wiki/bfwrepo/image/60d85896dea7a.png" alt="">
                                </span>
                                <p>
                                    <em>支付卡</em>
                                    <strong>各种支付卡折扣享不停</strong>
                                </p>
                            </div>
                            <div class="mark-main-list">
                                <span>
                                    <img src="//repo.bfw.wiki/bfwrepo/image/60d858c31c61b.png" alt="">
                                </span>
                                <p>
                                    <em>促销海报</em>
                                    <strong>炫酷海报让你更加醒目</strong>
                                </p>
                            </div>
                        </div>
                        <div class="layer-mask"></div>
                    </div>
                    <div class="system_list" style="width: 360px;">
                        <div class="system_list_tit">
                            <span>
                                <em style="background:#2fb3ff;"></em>
                                <strong>互动</strong>
                            </span>
                            <p>随心互动，让你更了解客户</p>
                        </div>
                        <div class="system_list_con">
                            <div class="mark-main-list">
                                <span>
                                    <img src="//repo.bfw.wiki/bfwrepo/image/60d8587f29dd2.png" alt="">
                                </span>
                                <p>
                                    <em>微邀请</em>
                                    <strong>颠覆传统方式，让请帖更快捷</strong>
                                </p>
                            </div>
                            <div class="mark-main-list">
                                <span>
                                    <img src="//repo.bfw.wiki/bfwrepo/image/60d858e30a30a.png" alt="">
                                </span>
                                <p>
                                    <em>微投票</em>
                                    <strong>了解粉丝选择，让你的特色更鲜明</strong>
                                </p>
   .........完整代码请登录后点击上方下载按钮下载查看