Your JavaScript targets a HTML element with the id ‘banner_div’. So the first step is to output such an element in the shortcode.
add_shortcode( 'shortcode_name', function () {
$out="<div id="banner_div'></div>';
return $out;
} );
Now you need to save the JavaScript (everything between the <script>
tags) as a file. This you can now enqueue which is a whole other question. Here’s a question about doing this with a widget.
I would go with:
wp_enqueue_script( 'unique-name', '/path/to/script.js, array(), false, true);
What is going on here? Let me summarise for you.
- Param 1 is a name for your script.
- Param 2 is the URL for where-ever you put the script file.
- Params 3 and 4 are not used in this example
- Param 5 sets the script output to the footer so it runs after the widget div is on screen.
For more reference on the function wp_enqueue_script
see the codex page