A simple picture switching effect implemented using html css js_javascript skills

As shown in the picture.


The image switching effect is very simple to implement and has good compatibility.

The html page is as follows

Copy the code The code is as follows:

• 


• < ;/a>


• 


• 


• < ;/li>
  

css style

Copy code The code 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;}

js script

Copy code The code is as follows:

$(function() {
var sWidth = $("#focus").width(); //Get the width of the focus image (display area)
var len = $(" #focus ul li").length; //Get the number of focus images
var index = 0;
var picTimer;

//The following code adds a number button and a translucent bar after the button , and there are two buttons for previous page and next page
var btn = "

";
for(var i=0; i < len; i ) {
btn = "";
}
btn = "

";
$("#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 on the same page The row floats to the left, so here you need to calculate the width of the surrounding ul element
$("#focus ul").css("width",sWidth * (len));

//mouse slide Stop automatic playback when the focus picture is on, and start automatic playback 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 automatic playback, unit: milliseconds
}).trigger("mouseleave");

//Display picture 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").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
}
});

The left and right switching images used