轮播图左右箭头jquery
创新互联公司-专业网站定制、快速模板网站建设、高性价比榆树网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式榆树网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖榆树地区。费用合理售后完善,10年实体公司更值得信赖。
.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();
})
分享标题:轮播图左右箭头jquery
转载源于:http://ybzwz.com/article/jieeop.html