轮播图
html部分
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3311044_a5m1cszjye8.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="index.css">
head>
<body>
<div class="banner">
<ul class="pic">
<li><a href="javascript:void(0)"><img src="image/1.jpg" alt="图片">a>li>
<li><a href="javascript:void(0)"><img src="image/2.jpg" alt="图片">a>li>
<li><a href="javascript:void(0)"><img src="image/3.jpg" alt="图片">a>li>
<li><a href="javascript:void(0)"><img src="image/4.jpg" alt="图片">a>li>
ul>
<ul class="tab">
<li>li>
<li>li>
<li>li>
<li>li>
ul>
<ul class="btn">
<li class="left"><i class="iconfont icon-zuojiantou">i>li>
<li class="right"><i class="iconfont icon-youjiantou">i>li>
ul>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
<script src="index.js">script>
body>
html>
css部分
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*清除浮动*/ .clearfix:after{ content: ""; display: block; clear: both; } a{ text-decoration: none; /*去除下滑线*/ /*字体颜色继承父级*/ color:inherit; }
.banner{ width: 1200px; height: 600px; /*border: 1px solid red;*/ position: relative; } .banner .pic li{ position: absolute; left: 0; top: 0; } .banner .pic img{ width: 1200px; height: 600px; } .banner .tab{ position: absolute; bottom: 10px; left: 50%; width: 128px; margin-left:-64px; height: 50px; } .banner .tab li{ border: 1px solid red; width: 20px; height: 20px; float: left; border-radius: 50%; } .banner .tab li.on{ background: burlywood; } .banner .btn li i{ position: absolute; font-size: 100px; top: 50%; margin-top: -50px; color: white; display: none; } .banner:hover .btn li i{ display: block; } .banner .btn li.left i{ left: 0; } .banner .btn li.right i{ right: 0; }
js部分
//获取图片 var pic = $(".banner .pic li"); //获取小圆点 var tab = $(".banner .tab li"); //获取箭头 var btn = $(".banner .btn li"); // 长度 var len = pic.length; var first = 0; // 定时器 var timer; //初始化 tab.eq(0).addClass('on');//一打开页面的时候显示哪张 pic.hide().eq(0).show(); //先全部隐藏，然后再显示第一个 // 圆点的方法 tab.click(function () { var x = $(this).index(); if(x!=first){ change(x) } }); // 箭头的方法 btn.click(function () { var x = first; if ($(this).index()){ //index获取下标 x++; //左箭头 if(x>=len) x=0;//到最后一张的时候再变为零 }else { x--; //右箭头 if(x<0) x=len-1 } change(x) }); // 定时器自动播放 auto(); function auto() { timer = setInterval(function(){ var x =first; x ++; x %= len //0%4 1&4 2%4 3%4 change(x) },3000); } // 清除定时器 $('.banner').hover(function (){ clearInterval(timer) },auto) //变化函数 function change(n) { // 老的就去掉样式 然后隐藏 tab.eq(first).removeClass('on'); pic.eq(first).fadeOut(3000); first = n; // 新的就添加样式 然后显示 tab.eq(first).addClass('on'); pic.eq(first).fadeIn(3000); }