Home > Developer > Web Develop
HTML code:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title> Carousel Chart Exercises </title>
<link rel= "stylesheet" href= "Css/css.css" type= "Text/css"/>
<body>
<ul class= "Back" > <!--background Image--
<li class= "L1" ></li>
<li class= "L2" ></li>
<li class= "L3" ></li>
<li class= "L4" ></li>
<li class= "L5" ></li>
</ul>
<ul class= "point" > <!--control button--
<li class= "Active" ></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class= "BTN" > < left and right control buttons--
<span class= "prev" ></span>
<span class= "Next" ></span>
</div>
</body>
<script src= "Js/jquery-1.7.2.js" ></script>
<script src= "Js/jq.js" ></script>
CSS code:
*{margin:0; padding:0;}
UL Li{list-style:none;}
. back{height:400px; overflow:hidden; margin-top:100px;}
. back li{width:100%; height:400px; margin:0 Auto;}
. back li.l1{background:red;}
. back Li.l2{background:yellow;}
. back Li.l3{background:blue;}
. back Li.l4{background:black;}
. back Li.l5{background:green;}
. point{text-align:center; Margin-top: -30px;}
. Point li{width:20px; height:20px; border:2px solid #fff; border-radius:10px; box-sizing:border-box; display:inline-b Lock;}
. Point li.active{background: #fff;}
. btn{position:relative;}
. btn span{Display:inline-block; vertical-align:top; width:100px; height:100px; Background:rgba (0,0,0,.5); Position: Absolute top:-235px; Cursor:pointer;}
. btn. prev{left:0}
. btn. next{right:0;}
JS Code:
$ (function () {
functionBanner (a,b,c,d,e) {//aIs the background map,bis active,CIs the background button,Dis the previous page,eis the next page
index=0;
Len=$ (a). Length-1;
function Teb (index) {
$ (c). EQ (index). addclass (b). Siblings ("). Removeclass (b);
$ (a). EQ (index). addclass (' Curr '). Siblings ("). FadeOut (' FadeIn '). Removeclass (' Curr ');
};
$ (c). Click (function () {
index=$ (This). index ();
TEB (index);
});
$ (d). Click (function () {
index--;
if (index<0) {
Index=len;
};
TEB (index);
});
$ (E). Click (function () {
index++;
if (Index>len) {
index=0;
};
TEB (index);
});
function Timerun () {
Time=setinterval (function () {
index++;
if (Index>len) {
index=0;
};
TEB (index);
},3000);
};
Timerun ();
};
Banner ('. Back>li ', ' active ', '. Point>li ', '. Prev ', '. Next ');
});
Use jquery to write a simple carousel diagram
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
