As shown in the figure.
The image switching effect is simple to implement and has good compatibility.
The html page is as follows
The code copy is as follows:
<div>
<div id="focus">
<ul>
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" /></a></li>
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/02.jpg" /></a></li>
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/03.jpg" /></a></li>
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/04.jpg" /></a></li>
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/05.jpg" /></a></li>
</ul>
</div>
</div><!-- wrapper end -->
</body>
css style
The code copy is as follows:
<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;}
/* qqshop 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>
js script
The code copy is as follows:
$(function() {
var sWidth = $("#focus").width(); //Get the width of the focus map (display area)
var len = $("#focus ul li").length; //Get the number of focus images
var index = 0;
var picTimer;
//The following code adds the numeric button and the translucent bar behind the button, as well as two buttons on the previous page and the next page
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 a mouse slide in event for the small button to display the corresponding content
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//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 scrolling left and right, that is, all li elements are floating left in the same row, so the width of the peripheral ul elements needs to be calculated here.
$("#focus ul").css("width",sWidth * (len));
//Auto playback stops when the mouse slides on the focus image, and starts 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");
//Show the picture function, display the corresponding content according to the received index value
function showPics(index) { //Ordinary switch
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); //Scroll the ul element through animate() to the calculated position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //Switch to the selected effect for the current button
$("#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
}
});
Used left and right switching pictures