js realizes the banner focus picture that switches three pictures (texts) together

js realizes the banner focus picture that switches three pictures (texts) together_javascript skills

WBOY

Release： 2016-05-16 15:42:38

Original

1315 people have browsed it

The example in this article describes how js implements a banner focus image that switches three images (texts) together. Share it with everyone for your reference. The details are as follows:
This is a banner focus picture that switches three pictures (texts) together based on JavaScript. It has left and right arrows. With the same focus picture, the pictures in three positions can be switched at the same time, and text descriptions can be interspersed in the middle of the pictures.
Operation rendering: -------------------View the effect Download the source code---------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The code for the js shared by everyone to realize the banner focus picture switching between three pictures (texts) at the same time is as follows

<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>

Copy after login

The above is the js code I shared with you to realize the banner focus image switching between three images (texts) at the same time. I hope you can like it.