jquery实现圆环形图文幻灯片切换效果代码-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
代码描述：jquery实现圆环形图文幻灯片切换效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="de-DE" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6, .container.specialservices .post-content h6, h5, h6, .container.specialservices .post-content h6, p, .wysiwyg ul, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    line-height: 1;
    font-family: "walsheim-regular";
    color: #1a1a1b;
    -webkit-font-smoothing: antialiased;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6, .container.specialservices .post-content h6, h5, h6, .container.specialservices .post-content h6, p, .wysiwyg ul, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 80%;
    font: inherit;
    vertical-align: baseline;
}
.content-block {
    position: relative;
}
.content-wrap.small-wrap {
    width: 100%;
    max-width: none;
}

.content-wrap.small-wrap {
    width: calc(100% - 398px);
    max-width: 1006px;

}
.content-wrap {
    width: calc(100% - 30px);
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}
.vert-spaced {
    padding-top: 150px;
    padding-bottom: 150px;
}
.content-wrap.small-wrap.lined:before {
    left: 0;
}
.content-wrap.small-wrap.lined:before, .content-wrap.small-wrap.lined:after {
    content: '';
    position: absolute;
    display: block;
}
.content-wrap.small-wrap.lined:before, .content-wrap.small-wrap.lined:after, .content-wrap.small-wrap.lined .mid-line {
    position: absolute;
    width: 1px;
    height: 100%;
    /*background: #e7e9ec;*/
    opacity: .5;
    top: 0;
    z-index: -1;
}
.columns {
    font-size: 0;
}
.content-block.history .copy-col {
    position: relative;
    z-index: 1;
}

.columns .col.middled {
    vertical-align: middle;
}

.columns .col.third {
    width: 33.3%;
}

.columns .col {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.columns .col.middled {
    vertical-align: middle;
}

.columns .col.two-thirds {
    width: 66.7%;
}
.columns .col {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.rel {
    position: relative;
}
.chapter-headline {
    margin-top: -200px;
	font-family: "lyon-light";
    font-size: 175px;
	font-family:宋体;
    letter-spacing: .06em;
	color:#BBA197;
}
p.s-text, .wysiwyg ul.s-text, .maps-list-item .openhours p, .maps-list-item .openhours .wysiwyg ul, .wysiwyg .maps-list-item .openhours ul{
  font-size: 15px;
    line-height: 25px;
    letter-spacing: .02em;

}
.top-spaced, .job-form .input-container, .intro-copy p, .intro-copy .wysiwyg ul, .wysiwyg .intro-copy ul, .container.about .post-content p, .container.about .post-content .wysiwyg ul, .wysiwyg .container.about .post-content ul{
  margin-top: 20px;
}
.columns .col.middled {
    vertical-align: middle;
}

.columns .col.two-thirds {
    width: 66.7%;
}
.columns .col {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.rel {
    position: relative;
}
.content-block.history .ui-col:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.chapter-image{
  position: absolute;top: 50%;
  left: 10%;
  width: 75%;
  -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
/*.img {
    width: 100%;
}*/
.img:before {
    content: '';
    padding-top: 66%;
    display: block;
}
.imgfill {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.fill-parent, .page-curtain, .ui-timelines svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-timelines svg:first-child {
    opacity: .10;
}

.ui-timelines svg {
    display: block;
    overflow: visible;
}
.ui-chapter {
    cursor: pointer;
    display: block;
    position: absolute;
}
.chapter-point {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    display: block;
    position: absolute;
    background: #1a1a1b;
    border: 1px solid #1a1a1b;
    box-sizing: border-box;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.chapter-label {
    font-family: "walsheim-regular";
    font-size: 12px;
    letter-spacing: .2em;
    color: #6c7076;
    position: absolute;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.chapter-point:after {
    content: '';
    position: absolute;
    display: block;
    border-radius: 100%;
    border: 3px solid #1a1a1b;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.ui-chapter:hover .chapter-point, .ui-chapter.current-chapter .chapter-point {
    width: 10px;
    height: 10px;
    background: white;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DrawSVGPlugin3.min.js"></script>

<script type="text/javascript">
var BUNDY = {
    $objects : {},
    functions : {
        windowLoad: [],
        windowResize: [],
        preloadComplete: []
    },
    instances : {},
    vars: {},
    async : {},
    images : []
};
function preload_images(images, functions) {
    if(typeof functions === 'undefined') functions = {};
    var loaded = 0;
    for(var i=0; i<images.length; i++) {
        ////console.log('preload '+images[i]);
        var img = new Image();
        img.onload = img.onerror = function() {
            ////console.log(img.src + ' loaded');
            var onImgParams = {
                //img : img,
                //index : i,
                loadedPct : (loaded / images.length)
            };
            if( _.isFunction(functions.onImgLoad) ) functions.onImgLoad(onImgParams);

            loaded++;
            if(loaded >= images.length && _.isFunction(functions.onAllImgsLoaded)) {
                ////console.log('all imgs loaded');
                functions.onAllImgsLoaded()
            }
        };
        img.src = images[i];
    }// endfor
}// preload_images()

var History = function($container, options) {
    if(typeof $container === 'undefined') return;

    var H = this;

    var defaults = {
        timelineLength : .65,    // length of timeline based on circle in decimal pct
        chapterSelector : '.ui-chapter',
        duration: 1,
        autoSwitchInterval: 4,
        currentIndex: 0,
        functions: {}
    };
    if(typeof options !== 'undefined') jQuery.extend(defaults, options);

    H.options = defaults;
    H.interval = new TimelineMax();
    H.$object = {
        container : $container,
        headline : $container.find('.chapter-headline'),
        copy : $container.find('.chapter-copy'),
        image : $container.find('.chapter-image'),
        timeline: {
            container : $container.find('.timeline-container'),
            svgContainer : $container.find('.timeline-container .ui-timelines'),
            svgTimeline : $container.find('.timeline-container .ui-timelines svg').last().find('circle'),
            chapters : $container.find('.timeline-container '+H.options.chapterSelector)
        }
    };
    //console.log('History objects', H.$object);

    init();

    function init() {
        if(_.isFunction(H.options.functions.onInit)) H.options.functions.onInit({timestamp:new Date()});
        init_circles();
        jQuery(document).on('click', H.options.chapterSelector, function(e) {
            chapterClick(e);
        });
        autoSwitch();
    }// init()

    function autoSwitch() {
        H.interval = new TimelineMax({loop:true});
        H.interval.to(window, H.options.autoSwitchInterval, {onComplete:function() {
            //H.options.currentIndex = get_next_index();
            //update_chapter();
            var nextIndex = get_next_index();
            //console.log('jump to next chapter', H.options.currentIndex, nextIndex);
            H.$object.timeline.chapters.eq(nextIndex).click();
            //H.interval.play();
        }});
    }// autoSwitch

    function chapterClick(e) {
        e.preventDefault();
        H.interval.kill();

        var $clicked = jQuery(e.currentTarget);
        ////console.log('CHAPTER CLICKED', $clicked);

        H.$object.timeline.chapters.removeClass('current-chapter');
        $clicked.addClass('current-chapter');
        //var timelinePCT = $clicked.attr('data-pct'),
        H.options.currentIndex = $clicked.index();
        //console.log('clicked index', chapterIndex);
        //update_timeline(timelinePCT);
        update_chapter();
        autoSwitch();
    }// chapterClick()
    
    function update_timeline(pct) {
        TweenMax.to(H.$object.timeline.svgTimeline, 1, {drawSVG:('0 '+pct+'%'), ease:Strong.easeOut});
    }

    function get_next_index() {
        var nextInde.........完整代码请登录后点击上方下载按钮下载查看