轮播图左右箭头jquery-创新互联
.header-logo {
margin-top: 27px;
margin-bottom: 27px;
}
.header-nav {
margin-top: 47px;
}
.header-nav, .header-nav a {
color: #555;
}
.flow-nav {
overflow: hidden;
height: 50px;
line-height: 50px;
position: fixed;
z-index: 1000;
width: 100%;
background-color: #f3520a;
top: 0;
}
.combgcolor{
background-color: #f3520a;
}
.header-icon1 {
background-p_w_picpath: url(/Content/p_w_picpaths/login.png);
}
.header-icon2 {
background-p_w_picpath: url("/Content/p_w_picpaths/registered.png");
}
.erw-bottom {
padding: 3px;
}
.erwe span {
height: auto;
}
.outer-box {
margin-top: -15px;
height: 318px;
}
.show_box{
min-width:1190px;
margin:0 auto;
}
.ul.pic_list,.show_box{
min-height:300px;
}
.left_btn,.right_click{
width:50px;
height:50px;
background-color:#000;
opacity:0.5;
background-color: #000;
opacity: 0.5;
position: relative;
z-index: 10;
top:45%;
cursor: pointer;
}
.left_btn{
float:left;
left:5%;
}
.right_click{
float:right;
right:5%;
}
(function ($) {
$.fn.turnPic = function () {
var index = 0;
var clickLeft = $(this).children(".left_btn");
var clickRight = $(this).children(".right_click");
var showUl = $(this).children("ul.pic_list").children("li");
var len = showUl.length;
var navList = $(this).children("div").children("a");
var timer;
var showImg=function(index) {
showUl.eq(index).stop(true, true).fadeIn("slow").siblings().fadeOut("slow");
navList.removeClass("select").css("opacity", "0.7").eq(index).addClass("select").css("opacity", "1");
}
timer = setInterval(function () {
showImg(index);
index++;
if (index == len) {
index = 0;
}
}, 3000);
var click=function(){
clearInterval(timer);
console.log(index)
showImg(index);
index++;
if (index == len) {
index = 0;
}
};
clickLeft.click(function () {
click();
});
clickRight.click(function () {
click();
});
navList.mouseover(function () {
index = navList.index(this);
showImg(index);
});
$(this).hover(function () {
clearInterval(timer);
}, function () {
timer = setInterval(function () {
showImg(index);
index++;
if (index == len) {
index = 0;
}
}, 3000);
}).trigger("moverleave");
}
})(jQuery);
$(function () {
$(".show_box").turnPic();
})
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章标题:轮播图左右箭头jquery-创新互联
分享链接:http://scjbc.cn/article/dgdehe.html