①源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
font-family:微软雅黑;
font-size:24px;
}
/*框*/
.div01 {
width:500px;
height:300px;
position:absolute;
overflow:hidden;
}
/*照片框*/
.div02 {
width:calc(500px*8);
height:300px;
position:absolute;
z-index:5;
}
.slideimg {
display:none;
}
.cimg {
display:block;
}
/*左右键*/
.abt {
display:block;
width:30px;
height:60px;
z-index:9;
opacity:0.3;
line-height:60px;
text-align:center;
background-color:gray;
color:white;
}
#lefta {
position:absolute;
left:0px;
top:40%;
}
#righta {
position:absolute;
right:0px;
top:40%;
}
.abt:hover {
opacity:0.6;
cursor:pointer;
}
/**/
#slideblock {
padding:3px 3px;
z-index:20;
border-radius:8px;
position:absolute;
left:25%;
bottom:20px;
width:213px;
height:12px;
background-color:#eaeaea;
opacity:0.8;
}
#slideblock ol {
list-style:none;
float:left;
width:12px;
height:12px;
margin-left:13px;
border-radius:100%;
background-color:white;
}
#slideblock ol.selected {
background-color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#righta").click( //为#lefta绑定了鼠标点击事件处理
function() {
//$("XXXXX").attr("id")取标记属性
var tid = $(".selected").attr("id");
if (tid == "c1") {
$("#c1").removeClass("selected");
$("#img1").removeClass("cimg");
$("#c2").addClass("selected");
$("#img2").addClass("cimg");
}
if (tid == "c2") {
$("#c2").removeClass("selected");
$("#img2").removeClass("cimg");
$("#c3").addClass("selected");
$("#img3").addClass("cimg");
}
if (tid == "c3") {
$("#c3").removeClass("selected");
$("#img3").removeClass("cimg");
$("#c4").addClass("selected");
$("#img4").addClass("cimg");
}
if (tid == "c4") {
$("#c4").removeClass("selected");
$("#img4").removeClass("cimg");
$("#c5").addClass("selected");
$("#img5").addClass("cimg");
}
if (tid == "c5") {
$("#c5").removeClass("selected");
$("#img5").removeClass("cimg");
$("#c6").addClass("selected");
$("#img6").addClass("cimg");
}
if (tid == "c6") {
$("#c6").removeClass("selected");
$("#img6").removeClass("cimg");
$("#c7").addClass("selected");
$("#img7").addClass("cimg");
}
if (tid == "c7") {
$("#c7").removeClass("selected");
$("#img7").removeClass("cimg");
$("#c8").addClass("selected");
$("#img8").addClass("cimg");
}
if (tid == "c8") {
$("#c8").removeClass("selected");
$("#img8").removeClass("cimg");
$("#c1").addClass("selected");
$("#img1").addClass("cimg");
}
}
);
$("#lefta").click( //为#lefta绑定了鼠标点击事件处理
function() {
//$("XXXXX").attr("id")取标记属性
var tid = $(".selected").attr("id");
if (tid == "c1") {
$("#c1").removeClass("selected");
$("#img1").removeClass("cimg");
$("#c8").addClass("selected");
$("#img8").addClass("cimg");
}
if (tid == "c8") {
$("#c8").removeClass("selected");
$("#img8").removeClass("cimg");
$("#c7").addClass("selected");
$("#img7").addClass("cimg");
}
if (tid == "c7") {
$("#c7").removeClass("selected");
$("#img7").removeClass("cimg");
$("#c6").addClass("selected");
$("#img6").addClass("cimg");
}
if (tid == "c6") {
$("#c6").removeClass("selected");
$("#img6").removeClass("cimg");
$("#c5").addClass("selected");
$("#img5").addClass("cimg");
}
if (tid == "c5") {
$("#c5").removeClass("selected");
$("#img5").removeClass("cimg");
$("#c4").addClass("selected");
$("#img4").addClass("cimg");
}
if (tid == "c4") {
$("#c4").removeClass("selected");
$("#img4").removeClass("cimg");
$("#c3").addClass("selected");
$("#img3").addClass("cimg");
}
if (tid == "c3") {
$("#c3").removeClass("selected");
$("#img3").removeClass("cimg");
$("#c2").addClass("selected");
$("#img2").addClass("cimg");
}
if (tid == "c2") {
$("#c2").removeClass("selected");
$("#img2").removeClass("cimg");
$("#c1").addClass("selected");
$("#img1").addClass("cimg");
}
}
);
//setInterval('$( "#righta" ).click()',2000);
$("#divslide").mouseenter( // hover 动作=mouseenter + mouseleave两个动作
function() {
$("#lefta").css("display", "inline-block");
$("#righta").css("display", "inline-block");
}
);
$("#divslide").mouseleave(
function() {
//alert('r');
$("#lefta").css("display", "none");
$("#righta").css("display", "none");
}
);
$("#righta").mouseenter( // hover 动作=mouseenter + mouseleave两个动作
function() {
$("#lefta").css("display", "inline-block");
$("#righta").css("display", "inline-block");
}
);
$("#lefta").mouseenter( // hover 动作=mouseenter + mouseleave两个动作
function() {
$("#lefta").css("display", "inline-block");
$("#righta").css("display", "inline-block");
}
);
});
</script>
</head>
<body>
<div class="div01">
<div class="div02">
<img id="img1" class="slideimg cimg" src="img京东/1.jpg">
<img id="img2" class="slideimg" src="img京东/2.jpg">
<img id="img3" class="slideimg" src="img京东/3.jpg">
<img id="img4" class="slideimg" src="img京东/4.jpg">
<img id="img5" class="slideimg" src="img京东/5.jpg">
<img id="img6" class="slideimg" src="img京东/6.jpg">
<img id="img7" class="slideimg" src="img京东/7.jpg">
<img id="img8" class="slideimg" src="img京东/8.jpg">
</div>
<a id="lefta" class="abt"><</a>
<a id="righta" class="abt">></a>
<div id="slideblock">
<ul>
<ol id="c1" class="selected"></ol>
<ol id="c2"></ol>
<ol id="c3"></ol>
<ol id="c4"></ol>
<ol id="c5"></ol>
<ol id="c6"></ol>
<ol id="c7"></ol>
<ol id="c8"></ol>
</ul>
</div>
</div>
</body>
</html>
样图:
②源码(JavaScript):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#banner{
height: 350px;
width: 650px;
margin: auto;
position: relative;
}
.arr-l,.arr-r{
width: 30px;
height: 60px;
color: #fff;
font-size: 25px;
text-align: center;
line-height: 60px;
background: rgba(0,0,0,.3);
position: absolute;
top: 50%;
margin-top: -50px;
z-index: 1;
}
.arr-l{
left: 0;
}
.arr-r{
right: 0;
}
img{
position: absolute;
}
</style>
<script type="text/javascript">
var i=1;
function left(){
i--;
if(i==0){
i=8;
}
document.getElementsByTagName('img')[0].src="img京东/"+i+".jpg";
}
function right(){
i++;
if(i>8){
i=1;
}
document.getElementsByTagName('img')[0].src="img京东/"+i+".jpg";
}
</script>
</head>
<body>
<div id="banner">
<a href="#" class="arr-l" onclick="left();"><</a>
<img src="img京东/1.jpg" style="width: 650px; height: 350px;">
<a href="#" class="arr-r" onclick="right();">></a>
</div>
</body>
</html>
③源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
height: 350px;
width: 650px;
margin: 100px auto;
position: relative;
}
.slider li {
position: absolute;
display: none;
}
.slider li:first-child {
display: block;
}
.arrow {
position: relative;
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 170px;
/* margin-top: -30px;*/
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
.slider img{
height: 350px;
width: 650px;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li><a href="#"><img src="img京东/1.jpg" alt=""></a></li>
<li><a href="#"><img src="img京东/2.jpg" alt=""></a></li>
<li><a href="#"><img src="img京东/3.jpg" alt=""></a></li>
<li><a href="#"><img src="img京东/4.jpg" alt=""></a></li>
<li><a href="#"><img src="img京东/5.jpg" alt=""></a></li>
<li><a href="#"><img src="img京东/6.jpg" alt=""></a></li>
<li><a href="#"><img src="img京东/7.jpg" alt=""></a></li>
<li><a href="#"><img src="img京东/8.jpg" alt=""></a></li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
var count=0;
$(".arrow-left").click(function(){
count--;
if(count==-1){
count=$(".slider li").length-1;
}
//fadeIn():通过不透明度的变化来实现所有匹配元素的淡入效果
//fadeOut():通过不透明度的变化来实现所有匹配元素的淡出效果
//让coubnt渐渐的显示其他的渐渐的隐藏
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
});
$(".arrow-right").click(function(){
count++;
if(count==$(".slider li").length){
count=0;
}
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
});
});
</script>
</body>
</html>