JQuery_jquery를 기반으로 이미지 캐러셀 효과(포커스 이미지) 구현
- WBOY원래의
- 2016-05-16 15:16:361267검색
순수한 jq 형식으로 가로 캐러셀 초점 이미지를 작성했는데, 작은 점이나 왼쪽 및 오른쪽 버튼을 클릭하여 전환할 수 있습니다. 너비가 고정된 유형입니다. 적응형 너비로 변경하는 것은 어렵지 않습니다. CSS에서 배너콘의 너비를 백분율로 변경한 다음, js의 상위 컨테이너 너비를 따르도록 ul 및 li의 너비를 변경해야 합니다. .
IE6 이상 브라우저와 호환되며, 캐러셀 속도와 전환 간격이라는 두 가지 매개변수를 변경할 수 있습니다.
렌더링은 다음과 같습니다.
HTML 코드는 다음과 같습니다.
<html>
<head>
<meta charset="utf-8">
<title>banner图</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/common.js"></script>
</head>
<body>
<div class="wrap">
<div class="banner">
<div class="bannerCon">
<ul class="imgList">
<li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/banner03.jpg" alt=""/></a></li>
</ul>
<ul class="btnList clearfix">
<li class="cur"><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<span class="pre-nex prev"><</span>
<span class="pre-nex next">></span>
</div>
</div>
</div>
</body>
</html>
Css 스타일은 다음과 같습니다.
@charset "utf-8";
/* 简单reset */
body, p, ul, ol, li {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
img { border:none; }
a,button{ outline: none; }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/* 具体样式 */
.banner {
position: relative;
height: 400px;
overflow: hidden;
}
.banner .bannerCon {
position: absolute;
top: 0;
left: 50%;
width: 800px;
height: 400px;
margin-left: -400px;
overflow: hidden;
}
.bannerCon .imgList {
position: absolute;
top: 0;
left: 0;
width: 99999px;
height: 400px;
}
.bannerCon .imgList li {
float: left;
width: 800px;
height: 400px;
}
.bannerCon .imgList li a {
position: relative;
display: block;
height: 100%;
}
.bannerCon .imgList li img {
width: 800px;
height: 400px;
}
.bannerCon .pre-nex {
display: none;
position: absolute;
top: 50%;
width: 40px;
height: 60px;
margin-top: -40px;
font: bold 40px/60px Simsun;
color: #ccc;
text-align: center;
border:none;
background: rgba(0,0,0,.30);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
cursor: pointer;
z-index: 3;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
height: 12px;
text-align:center;
z-index: 2;
_overflow: hidden;
}
.bannerCon .btnList li { display: inline; }
.bannerCon .btnList li span {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 6px;
background-color:#14829e;
cursor: pointer;
}
.bannerCon .btnList li.cur span { background-color: #f30; }
Js 코드는 다음과 같습니다.
//加载在文本读取之后的js语句 开始 =============================================================
function Scroll(obj,speed,interval){ //父级容器，轮播速度，切换间隔
$("."+obj).each(function(){
var $box = $(this),
$imgUl = $box.children(".imgList"),
$imgLi = $imgUl.children("li"),
$btnUl = $box.children(".btnList"),
$btnLi = $btnUl.children("li"),
$btnPreNex = $box.children(".pre-nex"),
$btnPre = $box.children(".prev"),
$btnNex = $box.children(".next"),
n = $imgLi.length,
width = $imgLi.width(),
left = parseFloat($imgUl.css("left")),
k = 0,
Player;
$imgUl.css("width",n*width);
function scroll(){ //轮播事件
$imgUl.stop().animate({left:-width},speed,function(){
k += 1;
$imgUl.css("left",0);
$imgUl.children("li:first").appendTo($(this));
$btnLi.removeClass('cur');
if(k >= n){
k = 0;
}
$btnUl.children("li").eq(k).addClass('cur');
});
}
$btnLi.click(function(){ //小圆点点击事件
var index = $btnLi.index(this);
$(this).addClass('cur').siblings("li").removeClass('cur');
if(index >= k){
var dif = index-k;
left = -dif*width;
$imgUl.stop().animate({left:left},speed,function(){
$imgUl.css("left",0);
$imgUl.children("li:lt("+dif+")").appendTo($imgUl);
});
}
else{
var j = n-(k-index);
$imgUl.css("left",(index-k)*width);
$imgUl.children("li:lt("+j+")").appendTo($imgUl);
$imgUl.stop().animate({left:0},speed);
}
k = index;
});
$btnPreNex.click(function(){ //左右按钮点击事件
var index = $btnLi.index(this);
if($(this).hasClass('next')){
if(!$imgUl.is(":animated")){
k += 1;
$imgUl.animate({left:-width},speed,function(){
$imgUl.css("left",0);
$imgUl.children("li:first").appendTo($(this));
if(k >= n){
k = 0;
}
$btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
});
}
}
else {
if(!$imgUl.is(":animated")){
k += -1;
$imgUl.css("left",-width);
$imgUl.children("li:last").prependTo($imgUl);
$imgUl.stop().animate({left:0},speed);
if(k < 0){
k = n-1;
}
$btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
}
}
});
$box.hover( //鼠标移入、移出事件
function(){
clearInterval(Player);
$btnPreNex.addClass('show');
},
function(){
Player = setInterval(function(){scroll()},interval);
$btnPreNex.removeClass('show');
}
);
Player = setInterval(function(){scroll()},interval);
});
}
$(function () { //读取轮播事件
Scroll("bannerCon",600,4000);
});
jq 라이브러리 로딩에 주의하세요. 사실 1.9.1을 사용하고 있습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.