码云链接：https://gitee.com/lengxiaoyixuan222/codes/v04flhtd78iay3jkn1gbw86
说明：点左右两边的箭头会切换不同的图片
效果图
源代码：
comic.html
<!doctype html>
<html>
<head>
<title>动漫网页</title>
<meta charset="utf-8">
<link rel="stylesheet" href="comic.css">
<style>
html,body{
position:relative;
height:100%;
}
body{
margin:0;
padding:0;
}
.comic-container{
width:100%;
height:80%;
margin-left:auto;
margin-right:auto;
}
.comic-slide{
font-size:18px;
display:flex;
background:#fff;
text-align:center;
justify-content:center;
align-items:center;
}
</style>
</head>
<body>
<div class="comic-container">
<div class="comic-wrapper">
<div class="comic-slide"><img src="comic/2.jpg"></div>
<div class="comic-slide"><img src="comic/3.jpg"></div>
<div class="comic-slide"><img src="comic/8.jpg"></div>
<div class="comic-slide"><img src="comic/10.jpg"></div>
<div class="comic-slide"><img src="comic/1.jpg"></div>
</div>
<div class="comic-pagination"></div>
<div class="comic-button-next"></div>
<div class="comic-button-prev"></div>
</div>
<script src="comic.js"></script>
<script>
var comic = new comic('.comic-container',{
pagination:'.comic-pagination',
paginationClickable:true,
nextButton:'.comic-button-next',
prevButton:'.comic-button-prev',
slidesPerView:1,
spaceBetween:30,
loop:true
});
</script>
<table height="300" width="1340" border="15" bordercolor="blanchedalmond" bordercolorlight="blanchedalmond" background="comic/22.jpg">
<tr>
<td><img src="comic/11.jpg"></td>
<td><img src="comic/12.jpg"></td>
<td><img src="comic/13.jpg"></td>
<td><img src="comic/14.jpg"></td>
<td><img src="comic/15.jpg"></td>
</tr>
<tr>
<td align="center"><a href="https://v.qq.com/x/cover/gz9q7kd8wviwkxv.html?ptag=sogou.movie.free&fromvsogou=1" title="你的名字">你的名字</a></td>
<td align="center"><a href="https://v.qq.com/x/cover/feqfsbsngr2re6e.html?ptag=sogou.movie.free&fromvsogou=1" title="声之形">声之形</a></td>
<td align="center"><a href="https://v.qq.com/x/cover/we35g3aduiwkudp.html?ptag=sogou.movie.free&fromvsogou=1" title="大鱼海棠">大鱼海棠</a></td>
<td align="center"><a href="https://v.qq.com/x/cover/v8uhui73u8iwtlf.html?ptag=sogou.movie.free&fromvsogou=1" title="烟花">烟花</a></td>
<td align="center"><a href="https://v.qq.com/x/cover/7fjv56lqblm6jhd.html?ptag=sogou.movie.free&fromvsogou=1" title="熊出没.变形记">熊出没.变形记</a></td>
</tr>
<tr >
<td><img src="comic/16.jpg"></td>
<td><img src="comic/17.jpg"></td>
<td><img src="comic/18.jpg"></td>
<td><img src="comic/19.jpg"></td>
<td><img src="comic/20.jpg"></td>
</tr>
<tr>
<td align="center"><a href="https://v.qq.com/x/cover/1dkgyxxz9g6pz5r.html?ptag=sogou.movie.pay&fromvsogou=1" title="魔镜奇缘2">魔镜奇缘2</a></td>
<td align="center"><a href="https://www.bilibili.com/bangumi/play/ss25402?bsource=sogou&fromvsogou=1" title="肆式青春">肆式青春</a></td>
<td align="center"><a href="https://v.qq.com/x/cover/q8xwiu8yyxahzz8.html?ptag=sogou.movie.free&fromvsogou=1" title="功夫熊猫3">功夫熊猫3</a></td>
<td align="center"><a href="http://v.pptv.com/show/KV4joAhu3hxicicQE.html?rcc_id=sogouyingshi&fromvsogou=1" title="刀剑神域：序列之争">刀剑神域：序列之争</a></td>
<td align="center"><a href="https://www.iqiyi.com/v_19rrkikmvw.html?vfm=m_502_sgss&fc=bb04f8ebddb43838&fv=p_05_01&fromvsogou=1" title="精灵旅社">精灵旅社</a></td>
</tr>
</table>
<table height="200" width="1350" border="5" bordercolor="blanchedalmond" bordercolorlight="blanchedalmond" background="img/comic/22.jpg">
<tr>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=yuq5nnt2wwlwfle&vid=r00163uk5pz&ab=520share1&ptag=2_6.4.8.17785_copy" title="一万年以后">一万年以后</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=5js0zcgygkcyrm3&vid=j0023dypgtm&ab=520share1&ptag=2_6.4.8.17785_copy" title="玉子爱情故事">玉子爱情故事</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=fxth4h1ghmfvsfs&vid=i0018mnspjp&ab=520share1&ptag=2_6.4.8.17785_copy" title="冰雪奇缘:生日惊喜">冰雪奇缘:生日惊喜</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=v9eycg48tq76x13&vid=e0015bffkiw&ab=520share1&ptag=2_6.4.8.17785_copy" title="魁拔"</a>魁拔</td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=28nhv10sq9w2wxj&vid=i0021g2s8il&ab=520share1&ptag=2_6.4.8.17785_copy" title="白雪公主与三只小猪">白雪公主与三只小猪</a></td>
</tr>
<tr>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=zxsr2hae16abq7v&vid=r00264nlwgz&ab=520share1&ptag=2_6.4.8.17785_copy" title="妈妈咪鸭">妈妈咪鸭</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=79iqu54lkjohxhb&vid=v00265bpf23&ab=520share1&ptag=2_6.4.8.17785_copy" title="金龟子">金龟子</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=5s48pz7dwbjifzc&vid=b00263kvgiq&ab=520share1&ptag=2_6.4.8.17785_copy" title="小公主艾薇拉与神秘王国">小公主艾薇拉与神秘王国</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?vid=http://www.dilidili.com/watch3/62296/&exsource=1&coverid=vjrvzv3s517g6m8&type=1&sharePlayNumTag=0&playtime=&ptag=2_6.4.8.17785_copy" title="寻梦环游记">寻梦环游记</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=zm91ry6rctntum8&vid=e0023xe9evh&ab=520share1&ptag=2_6.4.8.17785_copy" title="熊出没.奇幻空间">熊出没.奇幻空间</a></td>
</tr>
<tr>
<td align="center"><a href="http://m.v.qq.com/x/cover/y/y0vxr2r3ptzxbic/o0024bwaj7l.html&ab=520share1?ptag=2_6.4.8.17785_copy" title="神偷奶爸">神偷奶爸</a></td>
<td align="center"><a href="http://m.v.qq.com/x/cover/e/e70nsopw2u9h2yt/y0025jhmp05.html&ab=520share1?ptag=2_6.4.8.17785_copy" title="大世界">大世界</a></td>
<td align="center"><a href="http://yoo.qq.com/m/video.html?id=b07908a1sym&ptag=txvideo12&first=1" title="绿毛怪格林奇">绿毛怪格林奇</a></td>
<td align="center"><a href="http://m.v.qq.com/x/cover/a/aqvz9iryiju6tov/q0026vow1sg.html&ab=520share1?ptag=2_6.4.8.17785_copy" title="至爱梵高.星空之迷">至爱梵高.星空之迷</a></td>
<td align="center"><a href="http://m.v.qq.com/x/cover/4/4ry9ww0ksm70jze/x0024fot3zd.html&ab=520share1?ptag=2_6.4.8.17785_copy" title="大护法">大护法</a></td>
</tr>
<tr>
<td align="center"><a href="http://m.v.qq.com/x/cover/k/kkpdn0lz6drhxz8/f0019n8xiqc.html&ab=520share1?ptag=2_6.4.8.17785_copy" title="海绵宝宝">海绵宝宝</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=gpcfwzyrfzyalj7&vid=p00222q0ang&ab=520share1&ptag=2_6.4.8.17785_copy" title="名侦探柯南:纯黑的噩梦">名侦探柯南:纯黑的噩梦</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=ix1j98xuytaqtd3&vid=r0024un1ejv&ab=520share1&ptag=2_6.4.8.17785_copy" title="冰雪女王3:冰与火">冰雪女王3:冰与火</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=3o56brnhunm5bwx&vid=x0018dcg7rm&ab=520share1&ptag=2_6.4.8.17785_copy" title="西游记之大圣归来">西游记之大圣归来</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=2z2zpmtxsz8cima&vid=b0017cvo08p&ab=520share1&ptag=2_6.4.8.17785_copy" title="猪猪侠之终极决战">猪猪侠之终极决战</a></td>
</tr>
<tr>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=ix1j98xuytaqtd3&vid=r0024un1ejv&ab=520share1&ptag=2_6.4.8.17785_copy" title="牧野传奇">牧野传奇</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=31pcvaxw1gzsxes&vid=a0023gccxrv&ab=520share1&ptag=2_6.4.8.17785_copy" title="灵狼传奇">灵狼传奇</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=1zfay2szsj9ofgq&vid=t0022j2n4y8&ab=520share1&ptag=2_6.4.8.17785_copy" title="功夫四侠">功夫四侠</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=rdg5hxqxatebods&vid=q00229m3zb4&ab=520share1&ptag=2_6.4.8.17785_copy" title="新木偶奇遇记">新木偶奇遇记</a></td>
<td align="center"><a href="http://m.v.qq.com/play/play.html?coverid=zki8qxwa9tucnw2&vid=m0025f7qu50&ab=520share1&ptag=2_6.4.8.17785_copy" title="魔法总动员">魔法总动员</a></td>
</tr>
</table>
</body>
</html>
