效果图：
轮播图
前端html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/main.css" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/slide.js"></script>
</head>
<body>
<div class="content_solution_wrap">
<div class="main">
<h1>轮播图</h1>
<div class="slide_show">
<!--左箭头-->
<div class="pre_slide"><img src=" img/left_arrow.png" alt=""/></div>
<div class="detail_slide">
<!--要轮播的块-->
<div class="show_box">
<ul id="showItems">
<!--每个轮播内容-->
<li>
<div class="show_items">
<div class="show_items_left">
<img src=" img/image_01.jpg" alt=""/>
</div>
<div class="show_items_right">
<h2>slide1 标题</h2>
<p>slide1 内容</p>
</div>
</div>
</li>
<!--每个轮播内容 end-->
<li>
<div class="show_items">
<div class="show_items_left">
<img src=" img/image_02.jpg" alt=""/>
</div>
<div class="show_items_right">
<h2>slide2 标题</h2>
<p>slide2 内容</p>
</div>
</div>
</li>
<li>
<div class="show_items">
<div class="show_items_left">
<img src=" img/image_03.jpg" alt=""/>
</div>
<div class="show_items_right">
<h2>slide3 标题</h2>
<p>slide3 内容</p>
</div>
</div>
</li>
<li>
<div class="show_items">
<div class="show_items_left">
<img src=" img/image_04.jpg" alt=""/>
</div>
<div class="show_items_right">
<h2>slide4 标题</h2>
<p>slide4 内容</p>
</div>
</div>
</li>
</ul>
</div>
<!--要轮播的块 end-->
</div>
<!--右箭头-->
<div class="next_slide"><img src=" img/right_arrow.png" alt=""/></div>
</div>
</div>
</div>
</body>
</html>
前端css代码：
ul li{
list-style: none;
margin: 0;
}
ul{
margin: 0;
}
.content_solution_wrap{
height: 478px;
background-color: #343434;
color: #ffffff;
}
.main{
width: 1200px;
margin: 0 auto;
}
.content_solution_wrap h1{
font-weight: normal;
padding-top: 50.5px;
margin-top: 0;
margin-bottom: 35.6px;
text-align: center;
font-size: 28px;
line-height: 30px;
}
.content_solution_wrap img{
width: 100%;
}
.pre_slide img{
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%); /* for Chrome || Safari */
-moz-transform: translate(0, -50%); /* for Firefox */
-ms-transform: translate(0, -50%); /* for IE */
-o-transform: translate(0, -50%); /* for Opera */
cursor: pointer;
/*IE8 不兼容transform，所以箭头底部在中间位置*/
}
.next_slide img{
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%); /* for Chrome || Safari */
-moz-transform: translate(0, -50%); /* for Firefox */
-ms-transform: translate(0, -50%); /* for IE */
-o-transform: translate(0, -50%); /* for Opera */
cursor: pointer;
}
.content_solution_wrap .pre_slide{
float: left;
width: 1.73%;
height: 100%;
position: relative;
}
.content_solution_wrap .next_slide{
float: left;
width: 1.73%;
height: 100%;
position: relative;
}
.content_solution_wrap .slide_show{
height: 361.9px;
}
.slide_show .detail_slide{
float: left;
width: 96.54%;
height: 100%;
}
.slide_show .detail_slide .show_box{
width: 92%;
margin: 0 auto;
height: 100%;
overflow: hidden;
}
.slide_show .detail_slide .show_box > ul{
width: 400%; /*共有四个li*/
height: 100%;
position: relative;
}
.slide_show .detail_slide .show_box >ul >li{
width: 25%;
box-sizing: border-box;
top: 0;
position: absolute;
}
.show_items .show_items_left{
width: 50%;
float: left;
}
.show_items img{
width: 90%;
}
.show_items .show_items_right{
width: 50%;
padding-right: 10px;
box-sizing: border-box;
float: left;
}
.show_items .show_items_right h2{
font-size: 18px;
line-height: 18px;
font-weight: normal;
margin-top: 0;
margin-bottom: 30px;
}
.show_items .show_items_right p{
font-size: 14px;
line-height: 24px;
}
/*ie不兼容first-child伪类*/
.left_item{
float: left;
}
.right_item{
float: right;
}
/*ie不兼容first-child伪类 end*/
轮播图js代码：
$(document).ready(function(){
//轮播图
var index=0;
var timer;
var ul=$("#showItems"); //要轮播的ul
var lis=$(".show_box > ul > li"); //每个轮播内容li
var oneWidth=lis.eq(0).width(); //每个li的宽度
for(var i=0;i<lis.length;i++){ //给每个li定义一个left，让其在ul里排开
lis.eq(i).css("left",oneWidth*i+"px");
}
//自动切换
showtime();
//鼠标在箭头和轮播块上时不自动切换
$("#showItems").mouseover(function(){
clearInterval(timer);
});
$("#showItems").mouseout(function(){
showtime();
});
$(".pre_slide").mouseover(function(){
clearInterval(timer);
});
$(".pre_slide").mouseout(function(){
showtime();
});
$(".next_slide").mouseover(function(){
clearInterval(timer);
});
$(".next_slide").mouseout(function(){
showtime();
});
//鼠标在箭头和轮播块上时不自动切换 end
//鼠标左右方向切换
var left_arrow=$(".pre_slide");
var right_arrow=$(".next_slide");
//左右切换轮播图切入方向不同
right_arrow.click(function(){
index++;
if(index==lis.length){
index=0;
}
right_show(index);
});
left_arrow.click(function(){
index--;
if(index==-1){
index=lis.length-1;
}
left_show(index);
});
function showtime() {
timer = setInterval(function () {
index++;
if(index==lis.length){
index=0;
}
right_show(index);
}, 2000) //每2秒
}
//右==向左移动
function right_show(index){
var pre=index-1;
if(pre<0){
pre=lis.length-1;
}
if(pre==0){
var preMove=oneWidth*(lis.length-1);
}else{
var preMove=oneWidth*pre;
}
lis.eq(pre).animate({left:-oneWidth},400);
lis.eq(pre).animate({left:preMove},0);
lis.eq(index).animate({left:0},400);
}
//左==向右移动
function left_show(index){
var next=index+1;
if(next==lis.length){
next=0;
}
lis.eq(next).animate({left:oneWidth},400);
lis.eq(index).animate({left:-oneWidth},0);
lis.eq(index).animate({left:0},400);
}
});
