jquery image special effects making imitation Tencent QQ Mall home Banner Focus Picture Carousel switch effect, with index button control and control of the picture switch, the example code is as follows, interested friends can refer to ha
copy code code as follows:
<! DOCTYPE html>
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/>
<title>jquery picture scrolling imitation QQ mall with left and right button control focus picture Toggle scrolling </title>
<meta name= "description" content= "jquery image effect production imitation Tencent QQ Mall home page Banner Focus picture Carousel switch effect, with index button control and left and right button control picture switch"/>
<style type= "Text/css" >
*{margin:0;padding:0;}
body{font-size:12px;color: #222; Font-family:verdana,arial,helvetica,sans-serif;background: #f0f0f0;}
. Clearfix:after{content: "."; Display:block;height:0;clear:both;visibility:hidden;}
. Clearfix{zoom:1;}
Ul,li{list-style:none;}
img{border:0;}
. wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family: "Microsoft YaHei", SimHei; margin-bottom:20px;}
/* Focus */
#focus {width:800px;height:280px;overflow:hidden;position:relative;}
#focus Ul{height:380px;position:absolute;}
#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background: #000;}
#focus ul Li Div{position:absolute;overflow:hidden;}
#focus. Btnbg{position:absolute;width:800px;height:20px;left:0;bottom:0;background: #000;}
#focus. btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
#focus. BTN span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0; Margin-left:5px;cursor:pointer;background: #fff;}
#focus. BTN span.on{background: #fff;}
#focus. Prenext{width:45px;height:100px;position:absolute;top:90px;background:url (img/sprite.png) no-repeat 0 0;cursor:pointer;}
#focus. pre{left:0;}
#focus. Next{right:0;background-position:right top;}
</style>
<script type= "Text/javascript" src= "Http://jt.875.cn/js/jquery.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var swidth = $ ("#focus"). width (); Gets the width of the focus graph (display area)
var len = $ ("#focus ul li"). length; Get the number of focus graphs
var index = 0;
var Pictimer;
//The following code to add a number of buttons and buttons after the translucent bar, there is a previous page, the next page two buttons
var btn = "<div class= ' btnbg ' ></div><div class= ' btn ' >";
for (Var i=0 i < Len; i++) {
btn + = "<span></span>";
}
BTN + + </div><div class= ' prenext pre ' ></div><div class= ' prenext Next ' ></div> ';
$ ("#focus"). Append (BTN);
$ ("#focus. BTNBG"). CSS ("opacity", 0.5);
//Add mouse to the small button to slide the event to display the corresponding content
$ ("#focus. BTN span"). CSS ("opacity", 0.4). MouseOver (function () {
index = $ ("#focus. BTN span"). index (this);
showpics (index);
}). eq (0). Trigger ("mouseover");
//Prev, next page button transparency processing
$ ("#focus. Prenext"). CSS ("opacity", 0.2). Hover (function () {
$ (this). Stop (True,false). Animate ({"opacity": "0.5"},300);
},function () {
$ (this). Stop (True,false). Animate ({"opacity": "0.2"},300);
});
//prev button
$ ("#focus. Pre"). Click (function () {
index-= 1;
if (index = = 1) {index = len-1;}
showpics (index);
});
//Next page button
$ ("#focus. Next"). Click (function () {
index + 1;
if (index = = len) {index = 0;}
showpics (index);
});
//This example is the left and right scrolling, that is, all LI elements are floating in the same row, so here you need to calculate the width of the peripheral UL element
$ ("#focus ul"). CSS ("width", swidth * (len));
///mouse to stop AutoPlay when the focus chart is on, and automatically play when you slide out
$ ("#focus"). Hover (function () {
clearinterval (Pictimer);
},function () {
Pictimer = setinterval (function () {
showpics (index);
index++;
if (index = = len) {index = 0;}
},4000); This 4000 represents the interval of AutoPlay, in milliseconds
}). Trigger ("MouseLeave");
//Display picture function, display the corresponding content according to the received index value
function Showpics (index) {//normal toggle
var nowleft =-index*swidth; Calculates the left value of the UL element based on the index value
$ ("#focus ul"). Stop (True,false). Animate ({"Left": nowleft},300); By animate () adjust the UL element to scroll to the calculated position
$ ("#focus. BTN span"). Stop (True,false). Animate ({"opacity": "0.4"},300). EQ (index). Stop (True,false). Animate ({" Opacity ":" 1 "},300); Switch to the selected effect for the current button
}
});
</script>
</head>
<body>
<div class= "wrapper" >
<h1>jquery picture scrolling imitation QQ mall with left and right button control focus picture Toggle scrolling </h1>
<div id= "Focus" >
<ul>
<li><a href= "http://www.875.cn/" target= "_blank" ><img src= "img/01.jpg" alt= "QQ Mall focus Map effect Download"/> </a></li>
<li><a href= "http://www.875.cn/" target= "_blank" ><img src= "img/02.jpg" alt= "QQ Mall Focus Chart Effect Tutorial"/> </a></li>
<li><a href= "http://www.875.cn/" target= "_blank" ><img src= "img/03.jpg" alt= "jquery Mall focus Map Effect"/>< /a></li>
<li><a href= "http://www.875.cn/" target= "_blank" ><img src= "img/04.jpg" alt= "jquery Mall focus map Code"/> </a></li>
<li><a href= "http://www.875.cn/" target= "_blank" ><img src= "img/05.jpg" alt= "jquery Mall focus map Source"/> </a></li>
</ul>
</div><!--Focus end-->
</div><!--wrapper end-->
</body>
</html>
The effect chart is as follows:
