<!DOCTYPE html>
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比榆樹網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式榆樹網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務覆蓋榆樹地區(qū)。費用合理售后完善,10年實體公司更值得信賴。
<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>建造師考試網(wǎng)_全國專業(yè)建造師考試培訓平臺</title>
<link 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 rel="stylesheet">
<script src="/Content/js/user.js"></script>
<link href="/Content/css/base.css" rel="stylesheet" type="text/css">
<link 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 title="" target="_blank"><img alt="" src="/upload/otherpic63/213234.jpg"></a>
</li>
<li >
<a title="" target="_blank"><img alt="" src="/upload/otherpic63/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>
文章題目:輪播圖左右箭頭jquery
URL鏈接:http://www.rwnh.cn/article8/jieeop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、網(wǎng)站設(shè)計公司、網(wǎng)站營銷、外貿(mào)建站、網(wǎng)站維護、云服務器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)