轮播图左右箭头 jquery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>建造师考试网_全国专业建造师考试培训平台</title>
<link href="http://static.wangxiao.cn/login/css/newlogin.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://img.wangxiao.cn/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="http://static.wangxiao.cn/users/js/artDialog/artDialog.js"></script>
<link href="http://sxjy.wangxiao.cn/sxjy/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="/Content/js/user.js"></script>
<link href="/Content/css/base.css" rel="stylesheet" type="text/css">
<link href="http://jianzaoshi.cn/Content/css/index.css" rel="stylesheet" type="text/css">
<style type="text/css">
.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%;
}
</style>
</head>
<body>
<div class="show_box">
<div class="left_btn">
<img src="http://jianzaoshi.cn/Content/p_w_picpaths/leftbtn.png" width="100%">
</div>
<div class="right_click">
<img src="http://jianzaoshi.cn/Content/p_w_picpaths/leftbtn.png" width="100%">
</div>
<ul class="pic_list">
<li >
<a href="http://www.wangxiao.cn/jz1/83708370204.html" title="" target="_blank"><img alt="" src="https://cache.yisu.com/upload/information/20200311/55/213234.jpg"></a>
</li>
<li >
<a href="http://www.wangxiao.cn/jz2/53655365118.html" title="" target="_blank"><img alt="" src="https://cache.yisu.com/upload/information/20200311/55/213235.jpg"></a>
</li>
</ul>
<div class="title_nav">
<a href="javascript:;" target="_blank" class="" ></a>
<a href="javascript:;" class="select" ></a>
</div>
</div>
</body>
<script type="text/javascript">
(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();
})
</script>
</html>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
