js는 세 개의 그림(텍스트)을 함께 전환하는 배너 포커스 그림을 구현합니다_javascript 기술
- WBOY원래의
- 2016-05-16 15:42:381318검색
이 기사의 예에서는 js가 세 개의 이미지(텍스트)를 함께 전환하는 배너 포커스 이미지를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
JavaScript를 기반으로 세 개의 그림(텍스트)을 함께 전환하는 배너 포커스 그림입니다. 동일한 초점 그림으로 세 위치의 그림을 동시에 전환할 수 있으며 텍스트 설명을 삽입할 수 있습니다. 사진 중간에.
작업 렌더링: ------효과 보기 소스 코드 다운로드--------- - --------
팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
세 장의 그림(텍스트)을 동시에 전환하는 배너 포커스 그림을 구현하기 위해 모두가 공유하는 js의 코드는 다음과 같습니다
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三张图（文）片一起切换的banner焦点图</title>
<link href="css/jiaobenzhijia.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="lanrenzhijia">
<div class="b b1">
<ul class="lst lst1">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
</div>
<div class="b b2">
<ul class="lst lst2">
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/1.jpg" /></li>
</ul>
</div>
<div class="b3">
<ul class="lst lst3">
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
</ul>
</div>
<div class="cen">
<h3 class="cenTit">美文摘抄</h3>
<p class="wrd">花是如此柔弱，再美再艳，依然经不起朝来寒雨晚来风，春红谢匆匆，只剩满怀愁情。花却又是美丽的战士，风雨中尽管渐渐绿肥红瘦，终究不肯低头。生命也是一样，像精致的玻璃酒杯，常常经不起天灾人祸的撞击，粉碎成一地璀璨，每一片都是透明的心，生命又常常像昙花，用许多年的泪与汗，掺上心血浇灌，才会有笑看天下的一刻…<a target="_blank" href="http://www.jb51.net/">【查看更多】</a></p>
</div>
<div class="cen1">JS网页特效收集网站</div>
<span class="arr lef"></span>
<span class="arr rig"></span>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script>
$(function(){
$(".b").scrollable({
size:1,
items:".b ul",
loop:true,
next:".lef",
prev:".rig",
clickable:false,
circular:true
});
$(".b3").scrollable({
size:1,
items:".b3 ul",
loop:true,
next:".lef",
prev:".rig",
vertical:true,
clickable:false,
circular:true
});
})
</script>
</body>
</html>
위는 세 개의 이미지(텍스트) 사이를 동시에 전환하는 배너 포커스 이미지를 구현하기 위해 공유한 js 코드입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.