fiddle: https://jsfiddle.net/flfg7yqn/
jquery:
$(function () { $('.dvcontentslide').not(':eq(0)').addclass("dispnone"); $('.dvcontentslide:eq(0)').addclass("slideisactive"); var g = parseint($('div.slideisactive').index()) + 1; var u = $(".dvcontentslide").length; $("#spcur").text("current index: " + g); $("#spdvlen").text("slide div length: " + $(".dvcontentslide").length); (var = 0; < u; i++) $(".ulcontentslidernav").append('<li><a href="javascript:void(0);"><span></span></a></li>'); $(".ulcontentslidernav :first-child a").addclass("ulcontentslidernavsel"); $(".cslider").mouseover(function () { clearinterval(po); }).mouseout(function () { po = setinterval(autoslide, 4000); }); $(".ulcontentslidernav a").click(function (e) { e.preventdefault(); $(this).parent().parent().find(".ulcontentslidernavsel").removeclass("ulcontentslidernavsel"); $(this).addclass("ulcontentslidernavsel"); gototheslide($(this).parent().index()); }); function gototheslide(t) { $('.dvcontentslide').addclass("dispnone"); $('.dvcontentslide').removeclass("slideisactive"); $('.dvcontentslide:nth-child(' + ++t + ')').addclass("slideisactive").removeclass("dispnone"); } $("#acontentslidernext").click(function () { var k = $('div.slideisactive').index() + 1; if (k >= $(".dvcontentslide").length) { k = 1; $('.dvcontentslide').not(':eq(0)').addclass("dispnone").removeclass("slideisactive"); $('.dvcontentslide:eq(0)').addclass("slideisactive").removeclass("dispnone"); } else { $(".dvcontentslide:nth-child(" + k + ")").removeclass("slideisactive").addclass("dispnone"); $(".dvcontentslide:nth-child(" + ++k + ")").removeclass("dispnone").addclass("slideisactive"); } $("#spcur").text("current index: " + k); $(".ulcontentslidernavsel").removeclass("ulcontentslidernavsel"); $(".ulcontentslidernav li:nth-child(" + k + ") a").addclass("ulcontentslidernavsel"); }); $("#acontentsliderprev").click(function () { var k = $('div.slideisactive').index() + 1; if (k <= 1) { k = $(".dvcontentslide").length; $('.dvcontentslide').not(':eq(' + k + ')').addclass("dispnone").removeclass("slideisactive"); $('.dvcontentslide:nth-child(' + k + ')').addclass("slideisactive").removeclass("dispnone"); } else { $(".dvcontentslide:nth-child(" + k + ")").removeclass("slideisactive").addclass("dispnone"); $(".dvcontentslide:nth-child(" + --k + ")").removeclass("dispnone").addclass("slideisactive"); } $("#spcur").text("current index: " + k); $(".ulcontentslidernavsel").removeclass("ulcontentslidernavsel"); $(".ulcontentslidernav li:nth-child(" + k + ") a").addclass("ulcontentslidernavsel"); }); function autoslide() { var k = $('div.slideisactive').index() + 1; console.log(k); if (k >= $(".dvcontentslide").length) { k = 1; $('.dvcontentslide').not(':eq(0)').addclass("dispnone").removeclass("slideisactive"); $('.dvcontentslide:eq(0)').addclass("slideisactive").removeclass("dispnone"); } else { $(".dvcontentslide:nth-child(" + k + ")").removeclass("slideisactive").addclass("dispnone"); $(".dvcontentslide:nth-child(" + ++k + ")").removeclass("dispnone").addclass("slideisactive"); } $("#spcur").text("current index: " + k); $(".ulcontentslidernavsel").removeclass("ulcontentslidernavsel"); $(".ulcontentslidernav li:nth-child(" + k + ") a").addclass("ulcontentslidernavsel"); } var po = setinterval(autoslide, 4000); }); everything working fine except how can update jquery/css instead of showing slide, fades out current slide , fades in next slide keeping structure is.
have tried fadeout() fadein()? didn't see in code, follow link see if meet need.
Comments
Post a Comment