We Keep Coding

showing submenu one by one on hover

Actually, I am trying to make a sub-menu where user hovers on the first menu its child list should appear one after one and same on the other menu.
I think it is working fine just a minor problem. I am going to the 2nd or 3rd menu before the complete appearing of the first menu's child. 2nd and 3rd are working fine but again if I hover on the first menu it still shows the remaining list (child) which was left to appear.
(function($) {
$.fn.animateOneByOne = function(params) {
params = $.extend({
css: '',
duration: 700,
interval: 300,
order: 'ASC',
callback: ''
}, params);
if (params.order == 'ASC') {
elements = $(this);
} else {
elements = $(this).get().reverse();
}
count = $(this).length - 1;
$(elements).each(function(id) {
setTimeout(function(element) {
if (id == count) {
$(element).animate(params.css, params.duration, params.callback);
} else {
$(element).animate(params.css, params.duration);
}
}, id * (params.interval + params.duration), $(this));
});
};
})(jQuery);
$('.srvs_dropdown').hover(function() {
$(this).find("ul li").animateOneByOne({
css: {
opacity: '1'
},
duration: 450,
interval: 100
});
return false;
},
function() {
$(this).find("ul li").css("opacity", 0);
});
.srvs_dropdown li {
opacity: 0;
}
a {
color: #fff;
}
.pi-mm-list {
padding-left: 20px;
background-color: #09142D;
width: 250px;
color: #fff;
}
.pi-mm-list li ul {
display: none;
position: absolute;
left: 180px;
width: 234px;
padding-top: 7px;
background-color: #09142D;
z-index: 999;
}
.pi-mm-list li:hover ul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pi-mm-list">
<li class="srvs_dropdown">Network Security
<ul>
<li>Firewall and VPN</li>
<li>Web Security</li>
<li>Application Security</li>
<li>Threat Detection & Response</li>
<li>Data Leakage Prevention</li>
<li>IPS</li>
</ul>
</li>
<li class="srvs_dropdown">Endpoint Security
<ul>
<li>Antivirus</li>
<li>DLP</li>
</ul>
</li>
<li class="srvs_dropdown">Wireless Security
<ul>
<li>Access Point</li>
<li>Controller</li>
</ul>
</li>
</ul>

As far as I have understood or observed your question and code, looks like it only works correctly when you hover over all links for the first time top to bottom but once you reach the last menu item in the first block and start hovering in reverse from bottom to top you will see that the submenu links start appearing in randomly, problem is the delay that you have used you just need a small fix i.e incremental delay which you were missing. The code below it works as you expect, observe the difference in the $(elements).each(function(id) { just replace the setTimeOut with delay and add the increment there and watch the difference, you can remove the interval param too see below code and working example, hope it solves the problem.
(function($) {
$.fn.animateOneByOne = function(params) {
params = $.extend({
css: '',
duration: 700,
order: 'ASC',
callback: ''
}, params);
if (params.order == 'ASC') {
elements = $(this);
} else {
elements = $(this).get().reverse();
}
count = $(this).length - 1;
$(elements).each(function(id) {
let isLastLi = id == count;
console.log('animate', id);
(isLastLi) ? $(this).delay((id + 1) * params.duration).animate(params.css, 0, params.callback): $(this).delay((id + 1) * params.duration).animate(params.css, 0);
});
};
})(jQuery);
$('.srvs_dropdown').hover(function() {
console.log('here');
$(this).find("ul li").animateOneByOne({
css: {
opacity: '1'
},
duration: 400
});
return false;
},
function() {
$(this).find("ul li").stop().css("opacity", 0);
});
.srvs_dropdown li {
opacity: 0;
}
a {
color: #fff;
}
.pi-mm-list {
padding-left: 20px;
background-color: #09142D;
width: 250px;
color: #fff;
}
.pi-mm-list li ul {
display: none;
position: absolute;
left: 180px;
width: 234px;
padding-top: 7px;
background-color: #09142D;
z-index: 999;
}
.pi-mm-list li:hover ul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pi-mm-list">
<li class="srvs_dropdown">Network Security
<ul>
<li>Firewall and VPN</li>
<li>Web Security</li>
<li>Application Security</li>
<li>Threat Detection & Response</li>
<li>Data Leakage Prevention</li>
<li>IPS</li>
</ul>
</li>
<li class="srvs_dropdown">Endpoint Security
<ul>
<li>Antivirus</li>
<li>DLP</li>
</ul>
</li>
<li class="srvs_dropdown">Wireless Security
<ul>
<li>Access Point</li>
<li>Controller</li>
</ul>
</li>
</ul>

The main idea is to cancel timed-out function when it doesn't need to execute. It looks that out part in .hover(in, out) is the best place to do it. But first we need a list of setTimeout handlers which are generated in the in part. Something like this.
(function($) {
$.fn.animateOneByOne = function(params) {
params = $.extend({
css: '',
duration: 700,
interval: 300,
order: 'ASC',
callback: ''
}, params);
if (params.order == 'ASC') {
elements = $(this);
} else {
elements = $(this).get().reverse();
}
count = $(this).length - 1;
var handlers = [];
$(elements).each(function(id) {
var handle = setTimeout(function(element) {
if (id == count) {
$(element).animate(params.css, params.duration, params.callback);
} else {
$(element).animate(params.css, params.duration);
}
}, id * (params.interval + params.duration), $(this));
handlers.push(handle);
});
return handlers;
};
})(jQuery);
$('.srvs_dropdown').hover(function() {
$(this).data('handler',
$(this).find("ul li").animateOneByOne({//returns the list of handlers
css: {
opacity: '1'
},
duration: 450,
interval: 100
}));
return false;
},
function() {
$(this).data('handler').forEach(function(handle) {
clearTimeout(handle); //cancel setTimeout if it didn't start yet
});
$(this).find("ul li").css("opacity", 0);
});
.srvs_dropdown li {
opacity: 0;
}
.pi-mm-list {
padding-left: 20px;
}
.pi-mm-list li ul {
display: none;
position: absolute;
left: 180px;
width: 234px;
padding-top: 7px;
background: #09142D;
z-index: 999;
}
.pi-mm-list li:hover ul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pi-mm-list">
<li class="srvs_dropdown">Network Security
<ul>
<li>Firewall and VPN</li>
<li>Web Security</li>
<li>Application Security</li>
<li>Threat Detection & Response</li>
<li>Data Leakage Prevention</li>
<li>IPS</li>
</ul>
</li>
<li class="srvs_dropdown">Endpoint Security
<ul>
<li>Antivirus</li>
<li>DLP</li>
</ul>
</li>
<li class="srvs_dropdown">Wireless Security
<ul>
<li>Access Point</li>
<li>Controller</li>
</ul>
</li>
</ul>

Style News Ticker to include Break statement

I'm working to create a List news ticker and found a simple implementation on this link:
jQuery News Ticker
I want to include the <br> statement inside the generated dynamic list contents and would like the news ticker to manage the height of ticker automatically.
However, the list items containing <br/> element doesn't display the news item in multiple lines.
Please note that in my actual code, the list contents will be generated dynamically, thus, my news ticker should be able to manage any number of <br/> in its content and manage the height of ticker dynamically.
Can anyone please suggest how to achieve this?
Here's my sample code:
var ticker = $("#ticker");
var t;
var li_count = 1;
var li_length = $("ul.news-list li").length;
var li = $("li").first();
var runTicker = function(trans_width) {
$(li).css({
"left": +trans_width + "px"
});
t = setInterval(function() {
if (parseInt($(li).css("left")) > -$(li).width()) {
$(li).css({
"left": parseInt($(li).css("left")) - 1 + "px",
"display": "block"
});
} else {
clearInterval(t);
trans_width = ticker.width();
li = $(li).next();
if (li_count == li_length) {
li_count = 1;
li = $("li").first();
runTicker(trans_width);
} else if (li_count < li_length) {
li_count++;
setTimeout(function() {
runTicker(trans_width);
}, 500);
}
}
}, 5);
}
$(ticker).hover(function() {
clearInterval(t);
},
function() {
runTicker(parseInt($(li).css("left")));
});
runTicker(ticker.width());
#ticker {
line-height: 1.8em;
max-width: 600px;
color: #000;
overflow: hidden;
min-height: 40px;
height: auto;
}
.news-list {
padding: 0;
margin: 0;
position: relative;
list-style-type: none;
}
ul.news-list>li {
position: absolute;
white-space: nowrap;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
<ul class="news-list">
<li>
<p>My Paragraph<br/> with break.</p>
</li>
<li>
<ul>
<li>My Paragraph</li>
</ul>
</li>
<li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
</ul>
</div>

Please remove the statement "position:relative;" from the class ".news-list"
var ticker = $("#ticker");
var t;
var li_count = 1;
var li_length = $("ul.news-list li").length;
var li = $("li").first();
var runTicker = function(trans_width) {
$(li).css({
"left": +trans_width + "px"
});
t = setInterval(function() {
if (parseInt($(li).css("left")) > -$(li).width()) {
$(li).css({
"left": parseInt($(li).css("left")) - 1 + "px",
"display": "block"
});
} else {
clearInterval(t);
trans_width = ticker.width();
li = $(li).next();
if (li_count == li_length) {
li_count = 1;
li = $("li").first();
runTicker(trans_width);
} else if (li_count < li_length) {
li_count++;
setTimeout(function() {
runTicker(trans_width);
}, 500);
}
}
}, 5);
}
$(ticker).hover(function() {
clearInterval(t);
},
function() {
runTicker(parseInt($(li).css("left")));
});
runTicker(ticker.width());
#ticker {
line-height: 1.8em;
max-width: 600px;
color: #000;
overflow: hidden;
min-height: 40px;
height: auto;
}
.news-list {
padding: 0;
margin: 0;
list-style-type: none;
}
ul.news-list>li {
position: absolute;
white-space: nowrap;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
<ul class="news-list">
<li>
<p>My Paragraph<br/> with break.</p>
</li>
<li>
<ul>
<li>My Paragraph</li>
</ul>
</li>
<li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
</ul>
</div>
var ticker = $("#ticker");
var t;
var li_count = 1;
var li_length = $("ul.news-list li").length;
var li = $("li").first();
var runTicker = function(trans_width) {
$(li).css({
"left": +trans_width + "px"
});
t = setInterval(function() {
if (parseInt($(li).css("left")) > -$(li).width()) {
$(li).css({
"left": parseInt($(li).css("left")) - 1 + "px",
"display": "block"
});
} else {
clearInterval(t);
trans_width = ticker.width();
li = $(li).next();
if (li_count == li_length) {
li_count = 1;
li = $("li").first();
runTicker(trans_width);
} else if (li_count < li_length) {
li_count++;
setTimeout(function() {
runTicker(trans_width);
}, 500);
}
}
}, 5);
}
$(ticker).hover(function() {
clearInterval(t);
},
function() {
runTicker(parseInt($(li).css("left")));
});
runTicker(ticker.width());
#ticker {
line-height: 1.8em;
max-width: 600px;
color: #000;
overflow: hidden;
min-height: 40px;
height: auto;
}
.news-list {
padding: 0;
margin: 0;
position: relative;
list-style-type: none;
}
ul.news-list>li {
position: absolute;
white-space: nowrap;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
<ul class="news-list">
<li>
<p>My Paragraph<br/> with break.</p>
</li>
<li>
<ul>
<li>My Paragraph</li>
</ul>
</li>
<li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
</ul>
</div>

Hover function loops infinitly in plugin

I am making a simple plugin in which if i hover over an image its background color should change to semi-transparent black.
For that I have placed a tag above it with class name overlay to give the effect. Since height and width will be different for each image, I am taking the height/width from the image and dynamically giving it to overlay class. In the end when mouse goes out I am simply making background color transparent.
Here's the code
<div class="overlay"></div>
<a href="" class="box">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
(function($) {
$.fn.imageOverlay = function() {
return this.each(function() {
var $this = $(this);
var width = $this.width();
var height = $this.height();
$this.hover(function(){
$('.overlay').css({
width: width,
height: height,
backgroundColor: 'rgba(0,0,0,0.5)'
});
console.log('in');
}, function(){
$('.overlay').css({
width: 0,
height: 0,
backgroundColor: 'rgba(0,0,0,0)'
});
console.log('out');
});
});
}
}(jQuery));
(function($){
$('.box').imageOverlay();
}(jQuery));
.overlay {
position: absolute;
display: inline-block;
}
This is working but not as it should be when in and out starts and never stops; kind of going in loop.
Are there any solutions to this? Or is there a correct way to implement the same functionality as a plugin?

There is no real need to have a plugin for this
.box {
display: inline-block;
position: relative;
}
.box .overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.5);
}
.box:hover .overlay {
left: 0;
top: 0;
bottom: 0;
right: 0;
display: inline-block;
}
<div class="box">
<div class="overlay"></div>
<a href="">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
</div>
If you want jQuery plugin
(function($) {
$.fn.imageOverlay = function() {
return this.each(function() {
var $this = $(this),
$overlay = $this.find('.overlay');
$this.hover(function() {
$overlay.show();
}, function() {
$overlay.hide();
});
});
}
}(jQuery));
(function($) {
$('.box').imageOverlay();
}(jQuery));
.box {
display: inline-block;
position: relative;
}
.box .overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.box:hover .overlay {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="overlay"></div>
<a href="">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
</div>

Try this updated fiddle
HTML code
<div class="box">
<div class="overlay"></div>
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</div>
JS code
(function($){
$.fn.imageOverlay = function(){
return this.each(function(){
var $this = $(this);
var width = $this.find("img").width();
var height = $this.find("img").height();
$this.hover(function(){
$this.find('.overlay').css({
width: width,
height: height,
backgroundColor: 'rgba(0,0,0,0.5)'
});
console.log('in');
}, function(){
$this.find('.overlay').css({
width: 0,
height: 0,
backgroundColor: 'rgba(0,0,0,0)'
});
console.log('out');
});
});
}
}(jQuery));
(function($){
$('.box').imageOverlay();
}(jQuery));

If you are really looking for a jQuery only solution, then you can look at a timer based solution like
(function($) {
$.fn.imageOverlay = function() {
return this.each(function() {
var $this = $(this),
$overlay = $this.find('.overlay'),
$img = $this.find("img"),
timer;
$img.hover(function() {
var width = $img.width();
var height = $img.height();
$overlay.css({
width: width,
height: height
}).show();
}, function() {
timer = setTimeout(function() {
$overlay.hide();
}, 200);
});
$overlay.hover(function() {
clearTimeout(timer);
}, function() {
$overlay.hide();
});
});
}
}(jQuery));
(function($) {
$('.box').imageOverlay();
}(jQuery));
.overlay {
position: absolute;
display: inline-block;
background-color: rgba(0, 0, 0, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="overlay"></div>
<a href="">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
</div>

Carousel animation for left button works incorrectly

I am currently working on my own carousel script, but the transition animation for the left button is not working correctly.
I think the problem is in the test function under if($move=="left"), but I am unable to figure out what is causing this.
$(document).ready(function() {
/*********** CAROUSEL **********/
var carouselInterval = setInterval(function() {
moveCarousel();
}, 3000);
var carouselImageCount = $("#carousel li").length; // count the number of images
var transitionCount = 0;
function moveCarousel() {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-100%"
}, 1000, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
// when the cursur hovers on the image
$("#carousel,.carouselArrowRight,.carouselArrowLeft").hover(function() {
clearInterval(carouselInterval);
}, function() {
carouselInterval = setInterval(function() {
moveCarousel();
}, 3000);
});
/*********** CAROUSEL **********/
/*********** CAROUSEL ARROWS ************/
$(".carouselArrowRight").click(function() {
//moveCarousel();
test("right");
});
$(".carouselArrowLeft").click(function() {
test("left");
//moveCarousel();
});
function test($move) {
if ($move == "left") {
transitionCount--;
$(this).css({
"margin-left": "100%"
});
$("#carousel ul").animate({
marginLeft: "100%"
}, 1000, function() {
$(this).find("li:first").before($(this).find("li:last"));
$(this).css({
marginLeft: 0
});
});
} else {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-100%"
}, 1000, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
}
/*********** CAROUSEL ARROWS ************/
});
#carousel {
width: 100%;
overflow: hidden;
}
#carousel ul {
padding: 0px;
margin: 0px;
width: 1920px;
height: 330px;
display: flex;
}
#carousel ul li {
width: 100%;
text-align: left;
list-style: none;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="sectionArea01">
<div class="wrapCarousel">
<div class="carouselAlignment">
<p class="carouselArrowLeft">
<img src="http://placehold.it/30x30" alt="">
</p>
<div class="wrapInner">
<div id="carousel">
<ul id="carouselImages">
<li>
<img src="http://placehold.it/600x330" alt="">
</li>
<li>
<img src="http://placehold.it/600x330" alt="">
</li>
<li>
<img src="http://placehold.it/600x330" alt="">
</li>
</ul>
</div>
</div>
<p class="carouselArrowRight">
<img src="http://placehold.it/30x30" alt="">
</p>
</div>
</div>
</section>
enter link description here

You should change items before animation. Also fixed margins in animations to absolute values.
$(document).ready(function() {
/*********** CAROUSEL **********/
var carouselInterval = setInterval(function() {
moveCarousel();
}, 3000);
var carouselImageCount = $("#carousel li").length; // count the number of images
var transitionCount = 0;
function moveCarousel() {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-600px"
}, 2500, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
// when the cursur hovers on the image
$("#carousel,.carouselArrowRight,.carouselArrowLeft").hover(function() {
clearInterval(carouselInterval);
}, function() {
carouselInterval = setInterval(function() {
moveCarousel();
}, 5000);
});
/*********** CAROUSEL **********/
/*********** CAROUSEL ARROWS ************/
$(".carouselArrowRight").click(function() {
//moveCarousel();
test("right");
});
$(".carouselArrowLeft").click(function() {
test("left");
//moveCarousel();
});
function test($move) {
if ($move == "left") {
transitionCount--;
$("#carousel ul").find("li:first").before($("#carousel ul").find("li:last"));
$("#carousel ul").css({marginLeft: "-600px"})
.animate({marginLeft: "0"}, 2500);
} else {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-600px"
}, 2500, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
}
/*********** CAROUSEL ARROWS ************/
});
#carousel {
width: 100%;
overflow: hidden;
}
#carousel ul {
padding: 0px;
margin: 0px;
width: 1920px;
height: 330px;
display: flex;
}
#carousel ul li {
width: 100%;
text-align: left;
list-style: none;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="sectionArea01">
<div class="wrapCarousel">
<div class="carouselAlignment">
<p class="carouselArrowLeft">
<img src="http://placehold.it/30x30" alt="">
</p>
<div class="wrapInner">
<div id="carousel">
<ul id="carouselImages">
<li id="black">
<img src="http://placehold.it/600x330/000000/eeeeee" alt="">
</li>
<li id="red">
<img src="http://placehold.it/600x330/ff0000/eeeeee" alt="">
</li>
<li id="green">
<img src="http://placehold.it/600x330/00ff00/dddddd" alt="">
</li>
<li id="blue">
<img src="http://placehold.it/600x330/0000ff/aaaaaa" alt="">
</li>
</ul>
</div>
</div>
<p class="carouselArrowRight">
<img src="http://placehold.it/30x30" alt="">
</p>
</div>
</div>
</section>

How to join setInterval and .on("click") function together?

I have an extremely primitive slider using fadeIn, fadeOut and some control bullets.
https://jsfiddle.net/c2dsnr8v/1/
<div class="view">
<ul class="list">
<li class="frst">
<img src="http://www.guessthelogo.com/wp-content/uploads/2012/11/random-dice.gif" />
</li>
<li class="scnd">
<img src="https://avatars.yandex.net/get-music-content/a19fc9b4.a.1767585-1/200x200" />
</li>
<li class="thrd">
<img src="http://randomacts.channel4.com/images/fb_logo.gif" />
</li>
<li class="frth">
<img src="http://cs620120.vk.me/v620120530/93f0/k7U9HGQOBkw.jpg" />
</li>
</ul>
<div class="ctrl">
<div class="bullet one"></div>
<div class="bullet two"></div>
<div class="bullet three"></div>
<div class="bullet four"></div>
</div>
</div>
$(".list li:gt(0)").hide();
var int = setInterval(function(){
$('.list > :first-child')
.fadeOut()
.next()
.fadeIn()
.end()
.appendTo('.list');} ,3000);
$(".bullet").on("click", function(){
clearInterval(int);
$(".list li").fadeOut();
var $this = $(this);
if($this.hasClass("one")){
$(".list li.frst").fadeIn();
}else if($this.hasClass("two")){
$(".list li.scnd").fadeIn();
}else if($this.hasClass("three")){
$(".list li.thrd").fadeIn();
}else if($this.hasClass("four")){
$(".list li.frth").fadeIn();
}
})
I figured out how I can make pictures appear on clicking bullets (green squares), and the setInterval function here is clear enough. But when I tried to join these mechanisms together, I found out that I can only clear setInterval with a click. So once I use bullets, automatic rotating doesn't work anymore.
Is there any way to join the two together, using this code? For example, I click on a bullet, the picture stands still for 5 seconds, and then it keeps rotating further with the same speed?
I tried to include a new setInterval after each bullet click, but failed.

I think what you are looking for is setTimeout. setTimeout will execute a function once after a set amount of milliseconds. So in this example you can do:
//clear timeoutid incase you click a lot
clearTimeout(timeoutid);
timeoutid = setTimeout(function(){
int = setInterval(function(){
//List stuff
},2000);
},3000);
So in this case the next fade wont happen for 5 seconds after the click, but the rotation will continue on a 2 second interval.
Example JSFiddle:
https://jsfiddle.net/u6sdb40j/1/

Here is an updated snippet that removes the jumpiness. Basically the issue was in the ".appendTo('.list');", which reordered the list items and made it difficult to continue the rotation once a bullet was clicked. The code significantly changed to get around this, but it should be more efficient since the dom isn't being reordered every time through. Also, I removed a bunch of unnecessary classes and and am now using .index() to coordinate between the bullets and list items, as mentioned previously.
(function() {
var start = function() {
var active = $('.active'),
next = active
.removeClass('active')
.fadeOut()
.next();
if (!next.length) {
next = $('ul li:first-child');
}
next
.addClass('active')
.fadeIn()
.end();
},
go = function() {
return setInterval(start, 2000);
},
int = go();
$(".bullet").on("click", function() {
var currentIndex = $('div.bullet').index(this),
currentLi = $('ul li').eq(currentIndex);
clearInterval(int);
$('.active').removeClass('active').fadeOut();
currentLi.addClass('active').fadeIn();
int = go();
})
}());
.view {
margin: 100px auto 0;
width: 200px;
position: relative;
}
ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul li {
position: absolute;
top: 0;
left: 0;
}
.ctrl {
bottom: -215px;
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.bullet {
background-color: green;
height: 10px;
width: 10px;
cursor: pointer;
}
<div class="view">
<ul>
<li class="active">
<img src="http://www.guessthelogo.com/wp-content/uploads/2012/11/random-dice.gif" />
</li>
<li style="display:none;">
<img src="https://avatars.yandex.net/get-music-content/a19fc9b4.a.1767585-1/200x200" />
</li>
<li style="display:none;">
<img src="http://randomacts.channel4.com/images/fb_logo.gif" />
</li>
<li style="display:none;">
<img src="http://cs620120.vk.me/v620120530/93f0/k7U9HGQOBkw.jpg" />
</li>
</ul>
<div class="ctrl">
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

You can use an immediate function to encapsulate your vars and functions and avoid calling setInterval twice:
(function() {
$(".list li:gt(0)").hide();
var start = function() {
$('.list > :first-child')
.fadeOut()
.next()
.fadeIn()
.end()
.appendTo('.list');
},
go = function(elem) {
return setInterval(start, 2000);
},
int = go();
$(".bullet").on("click", function() {
clearInterval(int);
$(".list li").fadeOut();
var $this = $(this);
if ($this.hasClass("one")) {
$(".list li.frst").show();
} else if ($this.hasClass("two")) {
$(".list li.scnd").show();
} else if ($this.hasClass("three")) {
$(".list li.thrd").show();
} else if ($this.hasClass("four")) {
$(".list li.frth").show();
};
setTimeout(function() {
int = go();
}, 2000);
})
}());
(function() {
$(".list li:gt(0)").hide();
var start = function() {
$('.list > :first-child')
.fadeOut()
.next()
.fadeIn()
.end()
.appendTo('.list');
},
go = function(elem) {
return setInterval(start, 2000);
},
int = go();
$(".bullet").on("click", function() {
clearInterval(int);
$(".list li").fadeOut();
var $this = $(this);
if ($this.hasClass("one")) {
$(".list li.frst").show();
} else if ($this.hasClass("two")) {
$(".list li.scnd").show();
} else if ($this.hasClass("three")) {
$(".list li.thrd").show();
} else if ($this.hasClass("four")) {
$(".list li.frth").show();
};
setTimeout(function() {
int = go();
}, 2000);
})
}());
.view {
margin: 100px auto 0;
width: 200px;
position: relative;
}
.list {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.list li {
position: absolute;
top: 0;
left: 0;
}
.ctrl {
bottom: -215px;
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.bullet {
background-color: green;
height: 10px;
width: 10px;
cursor: pointer;
}
<div class="view">
<ul class="list">
<li class="frst">
<img src="http://www.guessthelogo.com/wp-content/uploads/2012/11/random-dice.gif" />
</li>
<li class="scnd">
<img src="https://avatars.yandex.net/get-music-content/a19fc9b4.a.1767585-1/200x200" />
</li>
<li class="thrd">
<img src="http://randomacts.channel4.com/images/fb_logo.gif" />
</li>
<li class="frth">
<img src="http://cs620120.vk.me/v620120530/93f0/k7U9HGQOBkw.jpg" />
</li>
</ul>
<div class="ctrl">
<div class="bullet one"></div>
<div class="bullet two"></div>
<div class="bullet three"></div>
<div class="bullet four"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
There is some initial "jumpiness" after clicking a bullet before it settles in that you might have to tweak. Also, you could probably clean up some of your code by using jQuery's .index() method, if desired.