jquery imitates QQ mall with left and right buttons to control focus image switching scrolling effect_jquery

Copy code The code is as follows: jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 *{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;} $(function() { var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积） var len = $("#focus ul li").length; //获取焦点图个数 var index = 0; var picTimer; //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮 var btn = " "; for(var i=0; i btn += " "; } btn += " "; $("#focus").append(btn); $("#focus .btnBg").css("opacity",0.5); //Add small button Mouse slide 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"); //Previous page and 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); }); //Previous page 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 left and right scrolling, that is All li elements float to the left in the same row, so here you need to calculate the width of the surrounding ul element $("#focus ul").css("width",sWidth * (len)); //Stop automatic playback when the mouse slides over the focus image, and start automatic playback when the mouse slides 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 automatic playback, unit: milliseconds }).trigger("mouseleave"); //Display image function, display the corresponding content according to the received index value function showPics(index) { //Normal switching var nowLeft = -index*sWidth; //Calculate the left value of the ul element based on the index value $("#focus ul").stop(true ,false).animate({"left":nowLeft},300); //Adjust the ul element to scroll to the calculated position through animate() $("#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 } }); jquery image scrolling imitates QQ mall with left and right buttons to control focus image switching and scrolling The rendering is as follows:

jquery imitates QQ mall with left and right buttons to control focus image switching scrolling effect_jquery

jquery image scrolling imitates QQ mall with left and right buttons to control focus image switching and scrolling

Related articles