javascript实现图片轮播简单效果

本文实例为大家分享了javascript实现图片轮播简单效果的具体代码，供大家参考，具体内容如下

这里是css样式

?* {
?? ??margin: 0;
    ?padding: 0;
?? ??? ??? ?}

?? ??? ??? ?ul,
?? ??? ??? ?li {
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ?}

?? ??? ??? ?img {
?? ??? ??? ??? ?display: block;
?? ??? ??? ??? ?/*vertical-align: middle;*/
?? ??? ??? ?}

?? ??? ??? ?a {
?? ??? ??? ??? ?text-decoration: none;
?? ??? ??? ?}

?? ??? ??? ?input {
?? ??? ??? ??? ?outline: none;
?? ??? ??? ?}

?? ??? ??? ?.clearFix:after {
?? ??? ??? ??? ?content: "";
?? ??? ??? ??? ?display: table;
?? ??? ??? ??? ?clear: both;
?? ??? ??? ?}

?? ??? ??? ?#box {
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?width: 500px;
?? ??? ??? ??? ?height: 300px;
?? ??? ??? ??? ?margin: 50px auto;
?? ??? ??? ??? ?overflow: hidden;
?? ??? ??? ?}

?? ??? ??? ?#box .imglist {
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?left: -500px;
?? ??? ??? ??? ?top: 0;
?? ??? ??? ??? ?width: 3500px;
?? ??? ??? ??? ?height: 300px;
?? ??? ??? ?}

?? ??? ??? ?#box .imglist li {
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?width: 500px;
?? ??? ??? ??? ?height: 300px;
?? ??? ??? ?}

?? ??? ??? ?#box .imglist li img {
?? ??? ??? ??? ?width: 500px;
?? ??? ??? ??? ?height: 300px;
?? ??? ??? ?}

?? ??? ??? ?#box span {
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?top: 50%;
?? ??? ??? ??? ?transform: translateY(-50%);
?? ??? ??? ??? ?width: 25px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?background-color: rgba(200, 200, 200, 0.7);
?? ??? ??? ??? ?font-size: 20px;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?line-height: 50px;
?? ??? ??? ??? ?color: white;
?? ??? ??? ??? ?opacity: 0;
?? ??? ??? ??? ?transition: opacity 1s;
?? ??? ??? ?}

?? ??? ??? ?#box .left {
?? ??? ??? ??? ?left: 0;
?? ??? ??? ?}

?? ??? ??? ?#box .right {
?? ??? ??? ??? ?right: 0;
?? ??? ??? ?}

?? ??? ??? ?#box .btnlist {
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?left: 50%;
?? ??? ??? ??? ?transform: translateX(-50%);
?? ??? ??? ??? ?bottom: 10px;
?? ??? ??? ??? ?overflow: hidden;
?? ??? ??? ?}

?? ??? ??? ?#box .btnlist li {
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?width: 10px;
?? ??? ??? ??? ?height: 10px;
?? ??? ??? ??? ?margin-right: 10px;
?? ??? ??? ??? ?border-radius: 50%;
?? ??? ??? ??? ?background-color: gray;
?? ??? ??? ?}

?? ??? ?#box .btnlist li.current {
?? ??? ????background-color: red;
}

这里是body里的div，我的图片都是宽500px的，你也可以改其尺寸的，不过相应的js代码也要更改

<div id="box">
?? ?<ul class="imglist">
?? ??? ?<li><img src="images/yaya5.jpg" /></li>
?? ??? ?<li><img src="images/yaya1.jpg" /></li>
?? ??? ?<li><img src="images/yaya2.jpg" /></li>
?? ??? ?<li><img src="images/yaya3.jpg" /></li>
?? ??? ?<li><img src="images/yaya4.jpg" /></li>
?? ??? ?<li><img src="images/yaya5.jpg" /></li>
?? ??? ?<li><img src="images/yaya1.jpg" /></li>
?? ??? ??? ?</ul>

?? ??? ??? ?<span class="left"> < </span>
?? ??? ??? ?<span class="right"> > </span>

?? ??? ??? ?<ul class="btnlist">
?? ??? ??? ??? ?<li class="current"></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ??? ?<li></li>
?? ???</ul>
</div>

这里是js代码,代码大部分地方都做了注释

// 元素对象
var left = document.querySelector(".left");
var right = document.querySelector(".right");
var imglist = document.querySelector(".imglist");
var box = document.querySelector("#box");
var dots = document.querySelectorAll(".btnlist li");

// 变量区
var imgWidth = 500; //图片的宽度
var time = 500; //切换一张图片耗费的时间
var steps = 50; //步数
var interval = 10; //定时任务的时间间隔
var current_red = 0;
// isMoving变量用于判断当前是否正在切图中
var isMoving = false;
// 自动轮播定时任务的id值
var autoId;

?? ??? ??? ?// 鼠标移入时显示左右箭头，移出时隐藏左右箭头
?? ??? ??? ?box.addEventListener("mouseenter", function (e) {
?? ??? ??? ??? ?left.style.opacity = 1;
?? ??? ??? ??? ?right.style.opacity = 1;
?? ??? ??? ??? ?// 鼠标移入到box时停止轮播
?? ??? ??? ??? ?clearInterval(autoId);
?? ??? ??? ?});
?? ??? ??? ?box.addEventListener("mouseleave", function (e) {
?? ??? ??? ??? ?left.style.opacity = 0;
?? ??? ??? ??? ?right.style.opacity = 0;
?? ??? ??? ??? ?// 鼠标移出box时开启自动轮播
?? ??? ??? ??? ?autoMove();
?? ??? ??? ?});
?? ??? ??? ?// 对左右箭头设置点击事件
?? ??? ??? ?function move(e, direction) {
?? ??? ??? ??? ?// isMoving为true时表示正在切换图片，不能再执行move函数的代码
?? ??? ??? ??? ?if (isMoving) {
?? ??? ??? ??? ??? ?return;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?isMoving = true;
?? ??? ??? ??? ?// 获取当前imglist的位置
?? ??? ??? ??? ?var start_x = imglist.offsetLeft;
?? ??? ??? ??? ?var end_x;
?? ??? ??? ??? ?// 判断direction的数据类型
?? ??? ??? ??? ?if (typeof direction === "number") {
?? ??? ??? ??? ??? ?end_x = direction;
?? ??? ??? ??? ??? ?var delta_x = end_x - start_x;
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?// 通过点击的箭头确定图片移动的距离
?? ??? ??? ??? ??? ?var delta_x = direction === "left" ? imgWidth : -imgWidth;
?? ??? ??? ??? ??? ?// 计算要移动到的位置
?? ??? ??? ??? ??? ?end_x = start_x + delta_x;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?// 计算每一步移动的距离
?? ??? ??? ??? ?var step_dis = delta_x / steps;
?? ??? ??? ??? ?var next_inter_id = setInterval(function () {
?? ??? ??? ??? ??? ?var current_x = imglist.offsetLeft;
?? ??? ??? ??? ??? ?current_x += step_dis;
?? ??? ??? ??? ??? ?imglist.style.left = current_x + "px";
?? ??? ??? ??? ??? ?// 条件成立表示完成了此次图片的切换，清除定时器
?? ??? ??? ??? ??? ?if (current_x === end_x) {
?? ??? ??? ??? ??? ??? ?// current_x等于0表示此时显示的是位置上的第一张图片(第一个li)，我们要切换到倒数第二张去。
?? ??? ??? ??? ??? ??? ?if (current_x === 0) {
?? ??? ??? ??? ??? ??? ??? ?imglist.style.left = -2500 + "px";
?? ??? ??? ??? ??? ??? ??? ?// current_x等于-3000表示此时显示的是位置上的最后一张(第七个li),我们要切换到第二张图片去。
?? ??? ??? ??? ??? ??? ?} else if (current_x === -3000) {
?? ??? ??? ??? ??? ??? ??? ?imglist.style.left = -500 + "px";
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?clearInterval(next_inter_id);
?? ??? ??? ??? ??? ??? ?// 图片切换完成时切换小圆点,传入的参数是此时imglist的left属性的值
?? ??? ??? ??? ??? ??? ?changeDots(current_x);
?? ??? ??? ??? ??? ??? ?// 图片切换完成，可以继续点击箭头或小圆点切图了
?? ??? ??? ??? ??? ??? ?isMoving = false;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}, interval);
?? ??? ??? ?}
?? ??? ??? ?right.addEventListener("click", function (e) {
?? ??? ??? ??? ?move(e, "right");
?? ??? ??? ?});
?? ??? ??? ?left.addEventListener("click", function (e) {
?? ??? ??? ??? ?move(e, "left");
?? ??? ??? ?});

?? ??? ??? ?/*?
?? ??? ??? ??? ?无限循环的实现思路：在首尾各添加一张图片，首部添加第五张图片，尾部添加第一张图片
?? ??? ??? ??? ?1、改变imglist的宽度
?? ??? ??? ??? ?2、改变imglist元素中left的值
?? ??? ??? ??? ?3、在添加两张图片后，轮播到第一张和最后一张时实现切换。
?? ??? ??? ?*/

?? ??? ??? ?// 小圆点的切换
?? ??? ??? ?function changeDots(current_x) {
?? ??? ??? ??? ?/*?
?? ??? ??? ??? ??? ?current_x可能的取值：0 -500 -1000 -1500 -2000 -2500 -3000
?? ??? ??? ??? ??? ?除以-500：?? ??? ??? ?0 ? 1 ? ? 2 ? ? 3 ? ? ?4 ? ?5 ? ?6?
?? ??? ??? ??? ??? ?整体减去1：?? ??? ??? ?-1 ? 0 ? ? 1 ? ? 2 ? ? ?3 ? ?4 ? 5
?? ??? ??? ??? ?*/
?? ??? ??? ??? ?var index = current_x / -500 - 1;
?? ??? ??? ??? ?index = index === -1 ? 4 : index === 5 ? 0 : index;
?? ??? ??? ??? ?// console.log(index);
?? ??? ??? ??? ?// 把上一个小圆点红色背景清除
?? ??? ??? ??? ?dots[current_red].className = "";
?? ??? ??? ??? ?// 把当前切换到的图片对应的小圆点添加红色背景
?? ??? ??? ??? ?dots[index].className = "current";
?? ??? ??? ??? ?// 将当前红色背景的小圆点的索引赋值给current_red变量
?? ??? ??? ??? ?current_red = index;
?? ??? ??? ?}

?? ??? ??? ?// 小圆点的点击事件
?? ??? ??? ?for (var i = 0; i < dots.length; i++) {
?? ??? ??? ??? ?dots[i].setAttribute("data-index", i);
?? ??? ??? ??? ?dots[i].onclick = function (e) {
?? ??? ??? ??? ??? ?var index = this.dataset.index;
?? ??? ??? ??? ??? ?// 计算图片要切换到的目标位置
?? ??? ??? ??? ??? ?var target_pos = -imgWidth * (Number(index) + 1);
?? ??? ??? ??? ??? ?// 利用现有的move函数完成点击小圆点图片的切换
?? ??? ??? ??? ??? ?move(e, target_pos);
?? ??? ??? ??? ?};
?? ??? ??? ?}

?? ??? ??? ?// 实现自动轮播
?? ??? ??? ?function autoMove() {
?? ??? ??? ??? ?autoId = setInterval(function () {
?? ??? ??? ??? ??? ?move("right");
?? ??? ??? ??? ?}, 3000);
?? ??? ??}
autoMove();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于javascript实现图片轮播简单效果的详细内容...